Javascript Google Maps Changing Icons

Question

I have been playing with Google maps I had it working but when I tried to change the Icons to Blue I lost some of the information in my pop up windows.

The first windows that opens is all correct but the second click on windows opens but the only thing the is correct is the point information the Lat & Lng if I remove the couston Icon back to the default it all works. i found the information on a site and tried to copy it into my script. I am just learning javascript and I am not sure where I when wrong.

The datetime alt speed and course are all ok on the frist window but fail on the click on window, the icons are now blue, if I remove the customIcons[call] from the statement var marker = createMarker(point,customIcons[call]); and replace it with datetime is seems to work. I thank all for having a look if there is anything that you think may help please advise.

My Script.....

function load() {
    if (GBrowserIsCompatible()) {

        // Get map (Version 2)
        var map = new GMap2(document.getElementById("map"));
        map.setUIToDefault();
        // Default user interface
        var icon = new GIcon();
        icon.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
        icon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
        icon.iconSize = new GSize(12, 20);
        icon.shadowSize = new GSize(22, 20);
        icon.iconAnchor = new GPoint(6, 20);
        icon.infoWindowAnchor = new GPoint(5, 1);

        var customIcons = [];
        customIcons["VE9SC-9"] = icon;

        // Get course
        GDownloadUrl("http://guardian.no-ip.org/track/phpsqlajax_genxml_track_25.php",
        function(data) {
            var xml = GXml.parse(data);
            var markers =
            xml.documentElement.getElementsByTagName("marker");
            var points = new Array(0);
            // For polyline
            // Loop through the markers
            for (var i = 0; i < markers.length; i++) {
                var datetime = markers[i].getAttribute("datetime");
                var speed = markers[i].getAttribute("speed");
                var course = markers[i].getAttribute("course");
                var alt = markers[i].getAttribute("alt");
                var call = markers[i].getAttribute("call");
                var point =
                new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                points[i] =
                new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                var marker = createMarker(point, customIcons[call]);
                map.addOverlay(marker);
            }
            // End loop
            // Polyline
            var polyline = new GPolyline(points, "#0066cc", 2);
            map.addOverlay(polyline);
            // Set map centre (to last point), zoom level
            map.setCenter(point, 13);
            // InfoWindow HTML (last marker)
            var html = "";
            html += "<div id=\"infobox\">";
            html += "VE9SC-9";
            html += "<br />This is my last position on";
            html += "<br />" + datetime;
            html += " UTC";
            html += "<br />" + point;
            html += "<br />Aluitude ";
            html += +alt;
            html += " Feet ";
            html += "<br />" + speed;
            html += " MPH  Last Recorded Speed";
            html += "<br />" + course;
            html += " deg Last Recorded Course";
            html += "<br />ve9sc@rogers.com";
            html += "<br /><a href=\"/index.html\">ve9sc.no-ip.org</a></div>";
            html += "<br />Updated Via MySql PHP.";
            html += "</div>";
            map.openInfoWindowHtml(point, html);
        });
    }
}

// General markers
function createMarker(point, datetime) {
    var marker = new GMarker(point, datetime);

    var html = "";
    html += "<div id=\"infobox\">";
    html += "VE9SC-9";
    html += "<br />This is my position on";
    html += "<br />" + datetime;
    html += " UTC";
    html += "<br />" + point;
    html += "<br />Aluitude ";
    html += +alt;
    html += " Feet ";
    html += "<br />" + speed;
    html += " MPH  Last Recorded Speed";
    html += "<br />" + course;
    html += " deg Last Recorded Course";
    html += "<br />ve9sc@rogers.com";
    html += "<br /><a href=\"/index.html\">ve9sc.no-ip.org</a></div>";
    html += "<br />Updated Via MySql PHP.";
    html += "</div>";

    GEvent.addListener(marker, 'click',
    function() {
        marker.openInfoWindowHtml(html);
    });
    return marker;
}

Answer 1

It looks like you are using V2 of Google Map API (which kind of old). In this version the 2nd argument that you try to pass to GMarker should be an GMarkerOptions not an GIcon (assume API Version 2.5+)

From your code I think you are trying to pass GIcon object from customIcons[] in which is incorrect. I think you should inspect the datetime object here to make sure it's an GmarkerOptions not GIcon

var marker = new GMarker(point, datetime);

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMarker