Geek Answers Handbook

Google maps api v3 - open infund with an external click

So, I have a V3 card that initializes as follows:

function init() { var mapCenter = new google.maps.LatLng(51.5081289,-0.128005); var map = new google.maps.Map(document.getElementById('map'), { 'zoom': 6, 'center': mapCenter, 'mapTypeId': google.maps.MapTypeId.ROADMAP, panControl: false, mapTypeControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.LEFT_TOP }, });

and marker loads that look like this:

 var marker25837500 = new google.maps.Marker({ map: map, pop_title: 'blah blah', pop_wind: 'more blah', zIndex: 999, icon: 'images/map_icons/s6.png' }); google.maps.event.addListener(marker25837500, 'click', onMarkerClick);

and finally, I have a function to open infowindow on click of each manufacturer:

 var infoWindow = new google.maps.InfoWindow; var onMarkerClick = OpenInfoWindow; function OpenInfoWindow() { var marker = this; infoWindow.setContent('<h3>' + marker.pop_title + '</h3>' + marker.pop_body); infoWindow.open(map, marker); }; google.maps.event.addListener(map, 'click', function() { infoWindow.close(); });

My question is: what do I need to do to make a specific marker (say marker25837500), show it infowindow when it clicks inside the page - maybe something like:

 <div id="marker25837500">click to see infoWindow!</div>

I am sure it is easy, but I just see my way, although it is!

thanks

+7
source share
2 answers

You can use the trigger event.

 $('#marker25837500').click(function () { google.maps.event.trigger(marker25837500, 'click') })

Check this out: https://developers.google.com/maps/documentation/javascript/reference#event

Edit: You also noticed that you call onMarkerClick() when the marker25837500 button is marker25837500 , but you called another function OpenInfoWindow() , so you might also need to change it.

+11
source

You do not need to do anything unusual or simulate click on a marker; just make sure that the OpenInfoWindow function can be achieved:

 //This is the simple case: var myDiv = document.getElementById( "marker25837500" ); google.maps.event.addDomListener( myDiv, "click", OpenInfoWindow ); //Or if you have other things that you want to accomplish when this occurs: var myDiv = document.getElementById( "marker25837500" ); google.maps.event.addDomListener( myDiv, "click", function() { OpenInfoWindow(); //Do other stuff here });

As long as the InfoWindow is in scope (can be achieved by calling the OpenInfoWindow function), this should work fine.

+2
source

More articles:


All Articles