External Link Trigger InfoWindow with Google Maps / JQuery

Question

Started playing around with the Google Maps API V3. I have a list of places in HTML with some data-coordinates. The places populate on the map however, what I want to happen is when you click on the actual link (i.e. Place 1) outside of the map, it triggers the infowindow to open as well.

HTML:

<div id="map"></div>

<div id="places">
   <div class="map-location" data-coordinates='{"lat" : 40.71837, "long" : -74.00608}'>
     <a href="http://link1.com">Place 1</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.71435, "long" : -74.00597}'>
     <a href="http://link2.com">Place 2</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.71803, "long" : -74.00305}'>
     <a href="http://link3.com">Place 3</a>
   </div>
   <div class="map-location" data-coordinates='{"lat" : 40.74238, "long" : -73.98946}'>
     <a href="http://link4.com">Place 4</a>
   </div>
</div>

JS:

var map;
var infowindow = new google.maps.InfoWindow();
var myOptions = {
   zoom: 15,
   center: new google.maps.LatLng(40.71938, -74.00552),
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

// grab data attributes from html
$('.map-location').each(function( index ){
  var rLat = $(this).data("coordinates").lat;
  var rLong = $(this).data("coordinates").long;
  var rName = $(this).find('a').html();
  var rHref = $(this).find('a').attr("href");
  var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>';
  var myLatLng = new google.maps.LatLng( rLat, rLong );

  var otherMarkers = new google.maps.Marker({
     position: myLatLng,
     map: map
  });

  // click actions
  google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
     return function() {
     infowindow.setContent( contentString );
     infowindow.open( map, otherMarkers );
    }
  })(otherMarkers, index));
});

How do I go about setting up a click for each link to trigger the infoWindow box on the map?

Answer 1

Make your JS like that: make a global array outside the function:

var infoArray = new Array();
var markerArray = new Array();

and save each instance of infowindow:

var map;
var infowindow = new google.maps.InfoWindow();
var myOptions = {
   zoom: 15,
   center: new google.maps.LatLng(40.71938, -74.00552),
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), myOptions);

// grab data attributes from html
$('.map-location').each(function( index ){
  var rLat = $(this).data("coordinates").lat;
  var rLong = $(this).data("coordinates").long;
  var rName = $(this).find('a').html();
  var rHref = $(this).find('a').attr("href");
  var contentString = '<a href="' + rHref + '" target="_blank">' + rName + '</a>';
  var myLatLng = new google.maps.LatLng( rLat, rLong );

  var otherMarkers = new google.maps.Marker({
     position: myLatLng,
     map: map
  });
 markerArray[myLatLng] = otherMarkers;

  // click actions
  google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
     return function() {
     infowindow.setContent( contentString );
     infowindow.open( map, otherMarkers );
    }
  })(otherMarkers, index));

});

infoArray[myLatLng] = infowindow;

and make a function on HTML :

<div id="map"></div>

<div id="places">
   <div class="map-location" >
     <a href="http://link1.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 1</a>
   </div>
   <div class="map-location" >
     <a href="http://link2.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 2</a>
   </div>
   <div class="map-location" >
     <a href="http://link3.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 3</a>
   </div>
   <div class="map-location" >
     <a href="http://link4.com" onclick ='infoOpen(40.71837,-74.00608);'>Place 4</a>
   </div>
</div>

and make a JS function :

function infoOpen(lat,lng){
   var myLatLng = new google.maps.LatLng(lat,lng);
   infoArray[myLatLng].open(map,markerArray[myLatLng]);
}

make map variable also global.

Also customize it according to you.

Answer 2

This example is accomplishing what you are trying to do:

http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm

hope this helps!