CODEWITHSUNDEEP
google-maps-api-3
perseverance
perseverance

Reputation: 6602

How do you activate an existing marker to show its infowindow on clicking a separate link in Google Maps v3?

I currently have created markers but I want to be able focus/show the marker's infowindow on click of a separate list of those marker names. How do you accomplish this? I couldn't find anything online.

javascript:

<script type="text/javascript"> 
  var infowindow;
  var locations = { 0: { lat: 32.42, long: -99.68,  name: 'Taylor Swift', info: '<b>Taylor Swift</b><br/><img src="http://www.8notes.com/images/artists/taylor_swift.jpg" width="50">' }, 
                    1: { lat: 35.42, long: -95.68,  name: 'Lady Gaga', info: '<b>Lady Gaga</b><br/><img src="http://images2.fanpop.com/images/photos/7500000/L-G-lady-gaga-7557892-500-500.jpg" width="50">' },
                    2: { lat: 37.78, long: -122.32, name: 'Selena Gomez', info: '<b>Selena Gomez</b><br/><img src="http://videokeman.com/image/pics/SelenaGomezsongPics1YnhHMtsn4mUdCM.jpg" width="50">' }  
                  }                       

  var myLatlng = new google.maps.LatLng(locations[0].lat,locations[0].long);
  var myOptions = 
  {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

   var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
   var markerBounds = new google.maps.LatLngBounds();

   $.each(locations, function(key, value) 
   {          
        var location  = new google.maps.LatLng(value.lat,value.long);
      var marker = new google.maps.Marker({
         position: location, 
         map: map,         
         title:value.name        
      });    

      markerBounds.extend(location);
      map.fitBounds(markerBounds);                          
      attachSecretMessage(marker, value);
   });

function attachSecretMessage(marker,value) 
{         
   google.maps.event.addListener(marker, 'click', function() 
   {      
        if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow(
       { content: value.info,
         size: new google.maps.Size(50,50)
       });     

      infowindow.open(map,marker);
   });    
}  

  </script>

html body:

<body>

<a id="showTaylorSwiftInfoWindow" href="#">Taylor Swift</a>
<a id="showLadyGagaInfoWindow" href="#">Lady Gaga</a>
<a id="showSelenaGomezInfoWindow" href="#">Selena Gomez</a>

</body>

Upvotes: 0

Views: 942

Answers (1)

Kasper Vesth
Kasper Vesth

Reputation: 4113

You would need to hold all your Markers in an Array so you could search through that and find the appropriate Marker. Once you have that you can call the click event handler, or just make the infowindow and open it as you do in the event handler.

But the important part is that you keep your markers in an Array because that is the only way you will be able to reference them again after they have been created.

Upvotes: 1

Related Questions