Home/ Questions/Q 6589177
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:08:23+00:00

I’m trying to draw a map with google maps javascript api in a custom

  • 0

I’m trying to draw a map with google maps javascript api in a custom web page.

All what I’ve found is how to paint over a map, but with a background map. I achieved to draw a map in localhost with custom features.

What I would like is to create my custom map from a data source.

Let’s say that I have a database with the coordinates of different poly forms:

Room1: (0, 0) – (10, 0) – (15, 10) – (10, 15) – (5, 10) – (0, 10) – (0, 0)
Room2: etc…

Then I would like to draw those forms in google maps, so I could use features like mouse moving, zoom and info windows when mouse click in the center of the room to show room info (description, surface, etc…) like google maps does in the maps.

Other option would be to use but then I’m asking how could I implement navigation through the canvas (mouse movement, zoom and info windows basically)

The questions are:
– Is it possible to do it with google maps api? How? (data structure and javascript code)
– If not, which possibilities do I have to implement a control like this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, here it goes my solution. Hope it helps someone!

    It works with jquery, Google Maps V3.

    This is the html:

    <body>
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/GM_LoadMap.js"></script>
Your map:<br/>

<div id="map" style="width: 600px; height: 400px"></div>
</body>

    js/GM_LoadMap.js:

    var infoWindow;

$("body").ready(function() {load()});
$("body").unload(function() {GUnload();});

/************************************************************************************
 * Métode d'inici
 ************************************************************************************/

function load() {
    var domMap = $("#map")[0];
    var myLatLng = new google.maps.LatLng(0,0);
    var myOptions = {
            zoom: 5,
            center: myLatLng,
            mapTypeControlOptions: {
                mapTypeIds: ['TControl']
            }
    };

    var map = new google.maps.Map(domMap, myOptions);

    createBlankCanvas(map, 600, 400);
    addPolyForm(map);
}

    To create blank image background:

    function createBlankCanvas(map, width, height) {
    var minZoomLevel = 0;
    var maxZoomLevel = 18;

    // Crea un fons en blanc
    var ubicaciones = new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return "";
            },
        tileSize: new google.maps.Size(width, height),
        maxZoom:maxZoomLevel,
        minZoom:minZoomLevel,
        isPng: true,
        name: 'Ubicaciones',
        opacity: 0.5
    });

    map.mapTypes.set('TControl', ubicaciones);
    map.setMapTypeId('TControl');
    map.setZoom(5); 
}

    To show poly forms:

    function addPolyForm(map) {
    var bermudaTriangle;
    var triangleCoords = [
                          new google.maps.LatLng(0,0),
                          new google.maps.LatLng(0, 1),
                          new google.maps.LatLng(1, 0.5)
                          ];

    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });

    bermudaTriangle.setMap(map);

    // Add a listener for the click event
    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
    infowindow = new google.maps.InfoWindow();
}

    To show info window:

    function showArrays(event) {

    // Since this Polygon only has one path, we can call getPath()
    // to return the MVCArray of LatLngs
    var vertices = this.getPath();

    var contentString = "<b>Triangle de les Bermudes:</b><br />";
    contentString += "Posici&ocaute seleccionada: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

    // Iterate over the vertices.
    for (var i=0; i < vertices.length; i++) {
        var xy = vertices.getAt(i);
        contentString += "<br />" + "Coordenada: " + i + "<br />" + xy.lat() +"," + xy.lng();
    }

    // Replace our Info Window's content and position
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);

    infowindow.open(map);
}
    • 0