Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps, open info window after click on a link

Tags:

i have this code to display a google map:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript"> function initialize() {          var mapOptions = {             zoom: 10,             center: new google.maps.LatLng(40.714364, -74.005972),             mapTypeId: google.maps.MapTypeId.ROADMAP         }         var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);           var locations = [             ['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']         ];           var marker, i;         var infowindow = new google.maps.InfoWindow();           google.maps.event.addListener(map, 'click', function() {             infowindow.close();         });           for (i = 0; i < locations.length; i++) {             marker = new google.maps.Marker({                 position: new google.maps.LatLng(locations[i][1], locations[i][2]),                 map: map,                 icon: locations[i][3]             });               google.maps.event.addListener(marker, 'click', (function(marker, i) {                 return function() {                     infowindow.setContent(locations[i][0]);                     infowindow.open(map, marker);                 }             })(marker, i));         }      }     google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="googlemap" style="width: 100%; height: 500px;"></div> <a href="#">Open Info Window</a> 

That's not the final code, because i want add more markers.

The problem is, that i need external links to open the info window of a marker.


For Example:

Link 1 opens the info window from marker 1
Link 2 opens the info window from marker 2
etc...

I need a link something like this:

<a href="javascript:marker(0)">Open Info Window One</a> 

Here is my code in jsfiddle: http://jsfiddle.net/fJ4jG/3/

I found couple of solutions, but i don't know how to use this code together with my code. It should work like this: http://www.geocodezip.com/v3_MW_example_map2.html

Thanks for every help!

like image 236
Nepo Znat Avatar asked Aug 20 '13 11:08

Nepo Znat


People also ask

What is info window in Google map?

An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map.

How do I get rid of infowindow in Google Maps?

After constructing an InfoWindow, you must call open to display it on the map. The user can click the close button on the InfoWindow to remove it from the map, or the developer can call close() for the same effect.

How do I add buttons to infowindow?

Adding click event on your function:addListener(infoWindow, 'domready' () => { const someButton = document. getElementById('btn-click'); if (someButton) { google. maps.


1 Answers

What that example does is it creates an array where it stores the markers. So when the markers are created, they get pushed to that markers array. When you click on the link you send an index with the function that is a reference to the marker in the array.

So JavaScript looks like this:

var markers = []; // The array where to store the markers  function initialize() {          var mapOptions = {             zoom: 10,             center: new google.maps.LatLng(40.714364, -74.005972),             mapTypeId: google.maps.MapTypeId.ROADMAP         }         var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);           var locations = [             ['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']         ];           var marker, i;         var infowindow = new google.maps.InfoWindow();           google.maps.event.addListener(map, 'click', function() {             infowindow.close();         });           for (i = 0; i < locations.length; i++) {             marker = new google.maps.Marker({                 position: new google.maps.LatLng(locations[i][1], locations[i][2]),                 map: map,                 icon: locations[i][3]             });              google.maps.event.addListener(marker, 'click', (function(marker, i) {                 return function() {                     infowindow.setContent(locations[i][0]);                     infowindow.open(map, marker);                 }             })(marker, i));              // Push the marker to the 'markers' array             markers.push(marker);         }      }     google.maps.event.addDomListener(window, 'load', initialize);      // The function to trigger the marker click, 'id' is the reference index to the 'markers' array.     function myClick(id){         google.maps.event.trigger(markers[id], 'click');     } 

And in your HTML a tag you add the myClick function like this:

<a href="#" onclick="myClick(0);">Open Info Window</a> 

Example: http://jsfiddle.net/fJ4jG/9/

like image 140
putvande Avatar answered Oct 21 '22 15:10

putvande