1

Having trouble adding links that will center and open an info window on my google map. The markers and their info windows work fine within the map itself.

The real problem is constructing an object that my onclick function can reference properly. My object oriented Javascript knowledge is shaky and I'm just not seeing the solution.

The map is loaded via a function that's called on page load and I have a seperate function that's called on click of an href within the page. Code is below.

function addMap(addressesJSON, id){
    var addresses = eval('(' + addressesJSON + ')');
    var cenLat = 41.677389;
    var cenLng = -72.384294;
    var latLow = 41.4;
    var lngLow = -72.8;
    var latHigh = 41.8;
    var lngHigh = -71.9;
    if (addresses.length){
        for (var i in addresses){
            addresses[i].lat = parseFloat(addresses[i].lat);
            addresses[i].lng = parseFloat(addresses[i].lng);
            if (i == 0){
                latLow = addresses[i].lat;
                latHigh = addresses[i].lat;
                lngLow = addresses[i].lng;
                lngHigh = addresses[i].lng;
            } else {
                if (addresses[i].lat < latLow){
                    latLow = addresses[i].lat;
                }
                if (addresses[i].lat > latHigh){
                    latHigh = addresses[i].lat;
                }
                if (addresses[i].lng < lngLow){
                    lngLow = addresses[i].lng;
                }
                if (addresses[i].lng > lngHigh){
                    lngHigh = addresses[i].lng;
                }
            }
            address = "<span style=\"color: #0000ff\">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href=\"#\" onClick=\"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">To</a> - <a href=\"#\" onClick=\"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">From</a>";
            addresses[i].address = address;
        }
        cenLat = (latLow + latHigh) / 2;
        cenLng = (lngLow + lngHigh) / 2;
    }

    var mapOptions = {
        center: new google.maps.LatLng(cenLat, cenLng),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Display a map on the page
    var map = new google.maps.Map(document.getElementById(id), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var infowindow =  new google.maps.InfoWindow();

    for (var i in addresses){
        var letter = addresses[i].letter;
        var data = addresses[i].address;
        var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);

        var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: addresses[i].name,
            icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
        });

        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function () {
                // Center on marker
                map.setCenter(marker.getPosition());
                // Set the data for the info window
                infowindow.setContent(data);
                // show the infowindow
                infowindow.open(map, marker);
            });
        })(marker, data);
    }
    map.fitBounds(bounds);
}

And the function that's fired onclick that I want to open the corresponding infowindow.

function moveCenter(lat, lng, letter){
    google.maps.event.trigger(marker[letter], "click");
}

Any help on how to build a marker object array and have it be seen by my moveCenter function would be greatly appreciated.

1 Answer 1

1

Looks like you just need to add this line to your code:

markers[letter] = marker;

and change your function:

function moveCenter(lat, lng, letter){
    google.maps.event.trigger(markers[letter], "click");
}

(make sure the markers array is in the global scope)

markers = [];
function addMap(addressesJSON, id){
    var addresses = eval('(' + addressesJSON + ')');
    var cenLat = 41.677389;
    var cenLng = -72.384294;
    var latLow = 41.4;
    var lngLow = -72.8;
    var latHigh = 41.8;
    var lngHigh = -71.9;
    if (addresses.length){
        for (var i in addresses){
            addresses[i].lat = parseFloat(addresses[i].lat);
            addresses[i].lng = parseFloat(addresses[i].lng);
            if (i == 0){
                latLow = addresses[i].lat;
                latHigh = addresses[i].lat;
                lngLow = addresses[i].lng;
                lngHigh = addresses[i].lng;
            } else {
                if (addresses[i].lat < latLow){
                    latLow = addresses[i].lat;
                }
                if (addresses[i].lat > latHigh){
                    latHigh = addresses[i].lat;
                }
                if (addresses[i].lng < lngLow){
                    lngLow = addresses[i].lng;
                }
                if (addresses[i].lng > lngHigh){
                    lngHigh = addresses[i].lng;
                }
            }
            address = "<span style=\"color: #0000ff\">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href=\"#\" onClick=\"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">To</a> - <a href=\"#\" onClick=\"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')\">From</a>";
            addresses[i].address = address;
        }
        cenLat = (latLow + latHigh) / 2;
        cenLng = (lngLow + lngHigh) / 2;
    }

    var mapOptions = {
        center: new google.maps.LatLng(cenLat, cenLng),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Display a map on the page
    var map = new google.maps.Map(document.getElementById(id), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var infowindow =  new google.maps.InfoWindow();

    for (var i in addresses){
        var letter = addresses[i].letter;
        var data = addresses[i].address;
        var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);

        var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: addresses[i].name,
            icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
        });
        markers[letter] = marker;

        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function () {
                // Center on marker
                map.setCenter(marker.getPosition());
                // Set the data for the info window
                infowindow.setContent(data);
                // show the infowindow
                infowindow.open(map, marker);
            });
        })(marker, data);
    }
    map.fitBounds(bounds);
}
1
  • Ah I was so close! Thank you so much for your help. Worked perfectly.
    – WrongSolo
    Nov 15, 2013 at 17:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.