So my code looks like this, multiple markers:

var m1 = new google.maps.Marker(
   new google.maps.LatLng(35.2602340, -93.7939480), 
   {icon:tinyIcon,bouncy:1}
);

google.maps.Event.addListener(m1, "click", function() {
   m1.openInfoWindowHtml(   
      '1<br />test,TX'
   );
});

map.addOverlay(m1);

var m2 = new google.maps.Marker(
   new google.maps.LatLng(35.2810510, -93.8246510), 
   {icon:tinyIcon,bouncy:1}
);

google.maps.Event.addListener(m2, "click", function() {
    m2.openInfoWindowHtml(
        'test<br />test,Texas'
    );
});

map.addOverlay(m2);

How can I get this to work externally?

href="google.maps.Event.trigger(1, 'click');">Something</>

So my code looks like this, multiple markers:

var m1 = new google.maps.Marker(
   new google.maps.LatLng(35.2602340, -93.7939480), 
   {icon:tinyIcon,bouncy:1}
);

google.maps.Event.addListener(m1, "click", function() {
   m1.openInfoWindowHtml(   
      '1<br />test,TX'
   );
});

map.addOverlay(m1);

var m2 = new google.maps.Marker(
   new google.maps.LatLng(35.2810510, -93.8246510), 
   {icon:tinyIcon,bouncy:1}
);

google.maps.Event.addListener(m2, "click", function() {
    m2.openInfoWindowHtml(
        'test<br />test,Texas'
    );
});

map.addOverlay(m2);

How can I get this to work externally?

href="google.maps.Event.trigger(1, 'click');">Something</>

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

2 Answers 2

To trigger the click event on one of the markers, you can simply do:

<a href="javascript:google.maps.event.trigger(m1, 'click');">Trigger Click on m1</a>

However, it looks like you have some further problems in your code, because you're mixing methods from the v2 API and the v3 API. For example, both the addOverlay() and openInfoWindowHtml() methods do not exist in the v3 API.

Therefore, your code should look something like this to work with the v3 API:

var map = new google.maps.Map(document.getElementById("map"), {
   zoom: 11,
   center: new google.maps.LatLng(35.26, -93.80),
   mapTypeId: google.maps.MapTypeId.ROADMAP
});

// You only need one InfoWindow object
var infowindow = new google.maps.InfoWindow();

// Create the markers, and keep a reference to them
var m1 = new google.maps.Marker({
  position: new google.maps.LatLng(35.2602340, -93.7939480),
  map: map
});

var m2 = new google.maps.Marker({
  position: new google.maps.LatLng(35.2810510, -93.8246510),
  map: map
});

// Add the events listeners on the markers
google.maps.event.addListener(m1, 'click', function() {
  infowindow.setContent('1<br />test,TX');
  infowindow.open(map, m1);
});

google.maps.event.addListener(m2, 'click', function() {
  infowindow.setContent('test<br />test,Texas');
  infowindow.open(map, m2);
});

If you deal with large numbers of markers:

var map;
var markers = []; // declared EXTERNALLY (and m1 and m2 in the examples above)

function setupMarkers() {

    var markersLayer =  new Array();
    markersLayer = [
        [52.26326, 21.673675], // marker #0
        [52.67328, 21.865789], // marker #1
        [52.34366, 21.348797]  // marker #2 etc.
    ];

    for (var i = 0; i < markersLayer.length; i++) {
    // or: for (var i in markersLayer) {
        var myLatLng = new google.maps.LatLng(markersLayer[i][0], markersLayer[i][1]);
        var marker = new google.maps.Marker({..., position: myLatLng, ...});
        google.maps.event.addListener(marker, 'click', function() {...}); 
        markers.push(marker);
    }

}

function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    setupMarkers();
}

function launchInfoWindow(x) {
    // window.scroll(0, 0);
    // markers[x].setMap(map);
    google.maps.event.trigger(markers[x], "click");
}

HTML:
<a href="javascript:launchInfoWindow(2);">...</a>