So i have a V3 map which is initialised like this:

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 a load of markers 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 lastly i have a function to open the infowindow on he click of each maker:

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 particular marker (say marker25837500) show its infowindow when a inside the page is clicked - perhaps something like:

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

I'm sure it's easy but i just can see my way though it!

Thanks

So i have a V3 map which is initialised like this:

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 a load of markers 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 lastly i have a function to open the infowindow on he click of each maker:

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 particular marker (say marker25837500) show its infowindow when a inside the page is clicked - perhaps something like:

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

I'm sure it's easy but i just can see my way though it!

Thanks

• javascript
• jquery
• google-maps
• google-maps-api-3

2 Answers 2

You might use trigger event.

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

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

Edit: Also noticed that you are calling onMarkerClick() when marker25837500 is clicked, but you named the other function OpenInfoWindow() so you might need to change that too.

You don't have to do anything unusual or simulate a click on the marker; just make sure the OpenInfoWindow function can be reached:

//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 acplish 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 reached when the OpenInfoWindow function is called), this should work fine.