Calling an event listener in google maps v3 from a link

Question

Hello, I'm trying to call the google.maps.event.addListener from a link. Here is the code I have so far:

        var divcc = '#badaba'; //click color
            var divhc = '#ffffce'; //hover color
            var divoc = '#FFF'; //original color
            var lastopenwin;
            var marker1;
        var marker2;
//MAP---------------------------------------------------
  function initialize() {
    //pin icons
    var image1 = '../images/marker.png';
    var temp1 = new google.maps.MarkerImage(image1);
    var image2 = '../images/coldmarker.png';
    var temp2 = new google.maps.MarkerImage(image2);
    //pins coords
    var latlng1 = new google.maps.LatLng(33.528782,-112.343972);
    var latlng2 = new google.maps.LatLng(32.996381,-112.231125);
    //info windows
    var content1 = '<div style="width:300px;">Hello World!!!</div>';
    var infowindow1 = new google.maps.InfoWindow({
            content: content1
        });
    var content2 = '<div style="width:300px;">Hello Universe!!!</div>';
    var infowindow2 = new google.maps.InfoWindow({
            content: content2
        });
    //map options
    var myOptions = {
      zoom: 8,
      center: latlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //place map
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    //place pins
   var marker1 = new google.maps.Marker({
          position: latlng1,
          icon: temp1,
          title:"Hello World!"
    });
    marker1.setMap(map);
    var marker2 = new google.maps.Marker({
          position: latlng2,
          icon: temp1,
          title:"Hello Universe!"
    });
    marker2.setMap(map);
    //listeners
    google.maps.event.addListener(marker1, 'click', function() {
        //alert(lastopenwin);
        if(lastopenwin){
            //alert(lastopenwin);
            lastopenwin.close();
        }
        document.getElementById("item1").style.background = divcc;
          infowindow1.open(map,marker1);
          lastopenwin = infowindow1;
        });
        google.maps.event.addListener(marker1, 'mouseover', function() {
            document.getElementById("item1").style.background = divhc;
            marker1.setIcon(temp2);
        });
        google.maps.event.addListener(marker1, 'mouseout', function() {
            document.getElementById("item1").style.background = divoc;
            marker1.setIcon(temp1);
        });
        google.maps.event.addListener(marker2, 'click', function() {
            //alert(lastopenwin);
            if(lastopenwin){
                lastopenwin.close();
            }
            document.getElementById("item2").style.background = divcc;
          infowindow2.open(map,marker2);
          lastopenwin = infowindow2;
        });
        google.maps.event.addListener(marker2, 'mouseover', function() {
            document.getElementById("item2").style.background = divhc;
            marker2.setIcon(temp2);
        });
        google.maps.event.addListener(marker2, 'mouseout', function() {
            document.getElementById("item2").style.background = divoc;
            marker2.setIcon(temp1);
        });         
}

What I'm using to try to trigger the map events in my links is:

href="javascript:google.maps.event.trigger(marker2, 'click');"

This isn't working. Anyone have an idea?

Answer 1

The problem is that you are referencing a variable that does not exist in the global scope.

To illustrate what's happening, consider the following code:

function initialize() {
    var my_local_variable = "Hello there!";
    alert("From function scope: " + my_local_variable)
}
initialize();
// Will alert "From function scope: Hello there!"
alert("From global scope: " + my_local_variable); 
// Will alert "From global scope: undefined"

You're doing the same thing in your initialize function with marker2. The solution is to use the google.maps.event.addListener() function inside of your initialize function to listen for the click event in your links. That is:

google.maps.event.addListener(
        document.getElementById("your_link_id"), 
        'click', 
        function() {
            // Work your magic here
});