I'm using the Google maps API (Version 2*) to render a map with images of people as the icons. However, if I try to have them open an infoWindow with their name when the icon is clicked, nothing happens (and no js error). Here is typical code:

    var map = new GMap2(document.getElementById("map_canvas"));
        G_PHYSICAL_MAP.getMaximumResolution = function () { return 9 };
     G_NORMAL_MAP.getMaximumResolution = function () { return 9 };
     G_SATELLITE_MAP.getMaximumResolution = function () { return 9 };
     G_HYBRID_MAP.getMaximumResolution = function () { return 9 };

    var icon1 = new GIcon();
    icon1.image = "http://opera.geek.nz/farbsoup/richard_grevers.png";
    icon1.iconSize = new GSize(40,50);
    icon1.iconAnchor = new GPoint(2,48);
    GEvent.addListener(icon1, 'click', function() {
  icon1.openInfoWindowHtml('Richard Grevers');
    markerOptions = {icon:icon1};
    map.addOverlay(new GMarker(new GLatLng(-39.056501,174.088733),markerOptions));

Is my problem that the event listener only works for the standard gmarker rather than custom icons, or something else? (I've tried putting the event Listener after the new GMarker line, but that hasn't fixed it).

*Yes I know that version 3 is out and 2 is deprecated. However, 3 is incomplete. It's missing little essentials like limiting zoom level.

2 answers

Kau-Boy 110
This was chosen as the best answer

Here is some code that works for me:

var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];
customIcons["blue"] = iconBlue;

function load(){
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(0, 0), 13);

        var bounds = new GLatLngBounds(); // for saving the points and calculating the center and zoom level
        var point = new GLatLng('51.503106', '-0.119734');
        var marker = new GMarker(point, customIcons['blue']);
        var html = "Some HTML content";
        GEvent.addListener(marker, 'click', function(){
        bounds.extend(point); // add point to boundries
        var zoom = map.getBoundsZoomLevel(bounds);
        if (zoom > 15) 
            zoom = 15; // limit to a max zoom level 
        map.setZoom(zoom - 1); // calculate and set zoom level
        map.setCenter(bounds.getCenter()); // calculate and set center

The HTML has to look (at least) like this:

<body onload="window.setTimeout('load()', 100);" onunload="GUnload();" style="margin: 0; padding: 0;">
    <div id="map" style="width: 100%; height: 432px;">

So the only thing which is diffrent to your implementation is the last line. Here I add the marker (which I have saved in a var) to the map using map.addOverlay(marker). I think this line is missing in your code.

EDIT: I updated the code so it is working without any additional code (you only need to include the API JS file). Ah, and I also use API version 2 form my website.

Answered almost 8 years ago by Kau-Boy

I saw my first infowindow once I defined the anchor point. However, no matter which icon I click (icon1,icon2 etc), the infowindow opens at the last defined icon with the text for that item.

Answered almost 8 years ago by Richard Grevers
  • okay, I've now solved that problem courtesey of an old question at stackoverflow. It's necessary to put the creation of the event listener inside a function which is outside the loop writing the javascript. For reference: http://stackoverflow.com/questions/1078309/google-maps-api-all-markers-opening-the-same-infowindow Richard Grevers almost 8 years ago
  • You cannot assign a infoWindow to an icon, as you can use a defined icon for several markers. You always have to assign the event to a marker. So you have to create the marker, save it in a var, add the event handler and than add it to the map. You can see how that works in my example code. Kau-Boy almost 8 years ago