CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
user2430227
user2430227

Reputation: 303

Dynamically Bind Click To Google Map Marker Link

Trying to bind a click to a link that is off the Google Map Canvas that will open the "infowindow" on a map marker. I know how to do it for a specific point, but I need to do it dynamically because the points that show up will always be different.

Here is how I'm trying to bind the click:

for (var i = 0; i < 6; i++) {
    var pointString = '<a href="#" class="openPoint" id="point' + i + '">' + myPoints[i][0] + ' - ' + myPoints[i][1] + ' Miles Away</a>';
    $('#pointsGoHere').append(pointString);
    $('#point' + i).click(function (e) {
        e.preventDefault();
        //HOW DO I OPEN THE INFOWINDOW TO THE CORRESPONDING MAP MARKER IN THIS CLICK?
    });
}

Here is my somewhat shortened Google Map Code so you can see how I'm using it:

var geocoder;
var map;

function initialize() {

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.75919, -73.984868);
    var mapOptions = {
        center: latlng,
        zoom: 11
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var myLatLng0 = new google.maps.LatLng(40.8752743, -74.0286719);
    mapMarker0 = new google.maps.Marker({
        position: myLatLng0,
        map: map,
        title: 'Origal LLP'
    });
    var contentString0 = '<div id="content0"><div id="siteNotice0"></div><div id="bodyContent0"><div style="display:inline; float:left"><h4>Origal LLP</h4></div></div></div>';

    infowindow0 = new google.maps.InfoWindow({
        content: contentString0
    });
    google.maps.event.addListener(mapMarker0, 'click', function () {
        infowindow0.open(map, mapMarker0);
        map.setCenter(mapMarker0.getPosition());
        map.setZoom(15);
    });


    var zip = $('#zip').val();
    geocoder.geocode({
        'address': zip
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            calculateDistance(results[0].geometry.location);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });

    function calculateDistance(latLonClient) {
        var loc0 = new google.maps.LatLng(40.8752743, -74.0286719);

        var clientAndPoint0 = Math.round(google.maps.geometry.spherical.computeDistanceBetween(latLonClient, loc0) * 0.000621371192);

        var myPoints = new Array();
        myPoints[0] = ['Origal LLP', clientAndPoint0, '244 Leonia Ave, Bogota, NJ 07603', 'infowindow0', mapMarker0];
        myPoints.sort(function (b, a) {
            if (a[1] < b[1]) return 1;
            if (a[1] > b[1]) return -1;
            if (a[1] > b[1]) return 1;
            if (a[1] < b[1]) return -1;
            return 0;
        });

        map.setCenter(myPoints[0][4].getPosition());
        map.setZoom(15);


        for (var i = 0; i < 6; i++) {
            var pointString = '<a href="#" class="openPoint" id="point' + i + '">' + myPoints[i][0] + ' - ' + myPoints[i][1] + ' Miles Away</a>';
            $('#pointsGoHere').append(pointString);
            $('#point' + i).click(function (e) {
                e.preventDefault();

            });
        }
    }

}

This is my first swing at using Google Maps, still getting the jist of things, I know I can condense this code, just haven't gotten there yet, I apologize for the bloat. Thank you for your help, and I apologize if there's already a similar question with the answer I need that I missed.

Upvotes: 0

Views: 1046

Answers (1)

user2287474
user2287474

Reputation: 646

This should do what you want. 

google.maps.event.trigger(point, "click");

so do it like:

for (var i = 0; i < 5; i++) {
    var pointString = '<li><a href="#" class="openPoint" id="point' + i + '" pointID="' + i + '">' + myPoints[i][0] + ' - ' + myPoints[i][1] + ' Miles Away</a></li>';
    $('#pointsGoHere').append(pointString);
}
$('.openPoint').each(function () {
    $(this).click(function (e) {
        e.preventDefault();
        var pointID = parseInt($(this).attr('pointID'));
        google.maps.event.trigger(myPoints[pointID][4], "click");
    });
});

Upvotes: 1

Related Questions