google maps javascript custom surface_问答_开发者

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 开发者_C百科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?

You can do this using the class OverlayView and overwriting some needed methods (notice that i'm using jQuery to create the html here, but you can do it whatever you want to):

YourCustomFormMarker.prototype = new google.maps.OverlayView;

YourCustomFormMarker.prototype.onAdd = function(){
    var $markerDiv = $("your html here");        


    this.div_ = $markerDiv[0];

    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild($markerDiv[0]);

}

YourCustomFormMarker.prototype.draw = function(){
    var overlayProjection = this.getProjection();

    var position = overlayProjection.fromLatLngToDivPixel(this.options.position);
    var div = this.div_;
    div.style.left = (position.x - this.options.x_offset)  + 'px';
    div.style.top  = (position.y - this.options.y_offset) + 'px';


}

YourCustomFormMarker.prototype.onRemove = function() {
    $(this.div_).remove();
    this.div_ = null;
}


function YourCustomFormMarker(options){

    var defaultOptions = {
        position : null,
        label: 'empty',
        time: '',
        x_offset: 15,
        y_offset: 0
    };

    //Merge options with default options
    this.options = $.extend(true, {},
        defaultOptions,
        options
    );

}

With this code you should be able to draw anything in the map that behaves exactly like a marker (when you make zoom, move the map, etc...).

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);
}