Custom Google Maps containers?

Question

I cannot find anything in the Google Maps V3 docs about creating custom content fields for Google maps.

The following is an example of a custom content window:

http://www.apple.com/retail/alamoana/map/

My question is ... how are you going to change the default popup of a white popup?

Hooray!

Answer 1

Look at the InfoBox toolkit in v3 utilities . I use them at dev.mapfaire.com if you want to take a look.

Answer 2

- Google .. php-, iframe, css, DIV, , .

"Drag, Dragstart, Dragend", .

, :

getPosition: function (marker) {
        var map = this.map /* Your map, in my case is part of my controller object linked to this.map */;
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng()
        );
        var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
        var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
        var pixelOffset = new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
        );
        return pixelOffset; /* Returns the top left pixel of the specified marker on the specified map */
    }

setPosition, , , . : google.maps.addEventListener(map, 'drag', function() {setPosition (, );});

setPosition , , , getPosition (marker):

setPosition: function (marker,element) {
    var p = this.getPosition(marker),
        s = {width:element.offsetWidth,height:element.offsetHeight},
        markerOffset = {width:58,height:58};
    element.style.left = p.x - (s.width/2) + (markerOffset.width/2) + "px"; /* We set the element left position to the marker position + half of our element width + half of the marker width so it is centered */
    element.style.top = p.y - s.height - (markerOffset.height) + 10 + "px"; /* We set the element top position to the marker position + our element height + markers height so it is 10px above our marker vertically */
},

Answer 3

google-. .

html- infowindows . , , , , .

: : http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

Answer 4

Take a look at gmaps-utility-library-dev and more specifically in ExtInfoWindow utility and PopupMarker utility

Answer 5

As Sudir noted, the Infobox plugin is one way to do what you want. I recently answered a similar question about using the infobox plugin for Google Maps api 3 and presented a complete example.