CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
wesside
wesside

Reputation: 5740

Google Maps Api v3 trigger issue, external link hit info window

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</>

Upvotes: 8

Views: 13604

Answers (2)

D K
D K

Reputation: 271

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>

Upvotes: 3

Daniel Vassallo
Daniel Vassallo

Reputation: 344521

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);
});

Upvotes: 3

Related Questions