CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Sebastien
Sebastien

Reputation: 31

Open a Google Maps Infowindow from external link

I am currently creating a bit of a Google Maps application using Javascript API v3. It's a map of results from a wordpress database, which dynamically populates the map, creating markers on the map, and on a sidebar the list of wordpress articles.

What I'm trying to do is the following :

when clicking on the link of the wordpress article on the sidebar, instead of going immediately on the article, it have to open the corresponding infowindow on the map. I tried to do it with JQuery, binding a click event on the link to open the infowindow, but unfortunately, it keeps opening the last infowindow created.

I do understand the issue here : JQuery evaluates the 'marker' variable only when the event is fired, thus using the last known value of the variable.

What I want to do is actually evaluates the 'marker' variable WHILE IN THE LOOP. And there I'm stuck. If anyone can help me on this one, I'll be really grateful.

Thanks for the time you'll take to answer me.

Here's a link to the app : http://88.191.128.36/buddypress/carte/

and here the function itself : 

    function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);

        if( sites[4] == '10'){
            var MarkerImage = new google.maps.MarkerImage('http://dediope.inovawork.net/buddypress/wp-content/themes/TheSource/images/marker-hotel.png');
      } else if (sites[4] == '9') {
            var MarkerImage = new google.maps.MarkerImage('http://dediope.inovawork.net/buddypress/wp-content/themes/TheSource/images/marker-golf.png');
        }

        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            icon: MarkerImage,
            title: sites[0],
            html: '<div><b>' + sites[0] + '</b> <br /> <a href="' + sites[3] + '"> Voir la fiche de ce lieu </a></div>'
        });


    marker_array[i] = marker ;

    // THIS IS WHERE I NEED HELP :)
    $j('#results_entry li .title:contains("' + sites[0] + '")').bind('click', function(){  infowindow.setContent(  marker.html ); infowindow.open( map, marker ); }) ; 

       var contentString = '<div><b>' + sites[0] + '</b> <br /> <a href="' + sites[3] + '"> Voir la fiche de ce lieu </a></div>';

       var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

       google.maps.event.addListener(marker, "click", function () {
           infowindow.setContent(this.html);
           infowindow.open(map, this);
        });       
    }
}

PS : Sorry if I didn't explain very well, I'm french so my english isn't perfect :)

Upvotes: 0

Views: 5934

Answers (1)

Sebastien
Sebastien

Reputation: 31

I finally found the solution thanks to this post :

Google Maps v3 opens the last infoWindow when a marker is clicked

The way to make it is to actually pass the object 'marker' and 'infowindow' to an external function and THEN bind the event. That way it binds the right marker and infowindow to the link.

Here the bit of code to show you how I did it, in case other people have the same issue as me:

// I REPLACED THAT
$j('#results_entry li .title:contains("' + sites[0] + '")').bind('click', function(){  infowindow.setContent(  marker.html ); infowindow.open( map, marker ); }) ; 


// BY THAT
BindLink(marker, sites[0], infowindow);

And i created a BindLink function OUTSIDE the function setmarkers() I had :

function BindLink( bmarker, titre, binfowindow ){
    $j('#results_entry li .title:contains("' + titre + '")').bind('click', function(){  
        binfowindow.setContent(  bmarker.html ); 
        binfowindow.open( map, bmarker ); 
    }) ;    
}

Now it works perfectly fine ( except that I can't figure out to close the previously opened infowindow but that's another story ! )

Upvotes: 3

Related Questions