I can't seem to find andthing in the Google Maps V3 docs about creating custom content boxes for Google maps.

Below is an example of a custom content box:

/

My question is... how do you go about changing the default white balloon popup?

Cheers!

I can't seem to find andthing in the Google Maps V3 docs about creating custom content boxes for Google maps.

Below is an example of a custom content box:

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

My question is... how do you go about changing the default white balloon popup?

Cheers!

• javascript
• google-maps
• maps
• google-maps-api-3

5 Answers 5

Look at the InfoBox toolkit in the v3 utility libraries. I'm using them on dev.mapfaire., if you want to take a look.

Personally, i don't use any of google's custom overlay scripts and such. I made a custom php page which hold the iframe, where I can load custom css files, and also I create custom DIVs that go over top of the map, which are then repositioned while dragging when opened.

You can use the "Drag,Dragstart,Dragend" events to help you reposition elements that you have created.

If you have custom markers set onto you page you can get their pixel position with this function:

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 */
    }

And then I use a setPosition function which is used when the window is dragging, it sets your custom element's position to the marker's position. The dragging event can be set in such manner: google.maps.addEventListener(map,'drag',function () { setPosition(marker,element); });

The setPosition Function simply gathers the width,height of the element, and the pixel offset associated to the marker using the getPosition(marker) function:

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's left position to the marker's position + half of our element's width + half of the marker's width's so it is centered */
    element.style.top = p.y - s.height - (markerOffset.height) + 10 + "px"; /* We set the element's top position to the marker's position + our element's height + markers height so it is 10px above our marker vertically */
},

Sometimes you just have to think a bit outside the box

That example is using the second version of google maps. That features might not be available in the 3rd one.

But you can add any html code in the infowindows and personalize them. I'm not sure if you can change how they look directly, but you can definitely change how the content looks like.

Edit: I found some sample code: http://gmaps-samples-v3.googlecode./svn/trunk/infowindow_custom/infowindow-custom.html

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

As Sudhir pointed out, the Infobox Plugin is one way to do what you want. I've recently answered a similar question about using the infobox plugin for google maps api 3 and provided a plete example.