Cannot seem to get marker clicks on Google Maps to do anything

Question

I have a simple Google Maps feat I'm trying and failing to accomplish.

Presently, I can display my map, then cycle through a list of Projects via PHP (I'm using ExpressionEngine), and add each project's latitude/longitude to a JavaScript array.

Once the values are in the JavaScript array, I use jQuery to cycle through each one, and add a marker to the map.

I'm able to click the map and have it respond appropriately; however, when I attempt to click one of the markers, nothing happens at all.

I have tried moving code, renaming, changing, editing, and tweaking endlessly... I cannot figure this out. Any help at all would be hugely appreciated. My code is as follows:

<script>

  // Create the new map_locations array
  var map_locations = [];

</script>



<!-- The following ExpressionEngine script loops through all the 'projects' on the site,
     then pushes each project to the map_locations array. -->
{exp:channel:entries channel="projects"}

  <script>


    map_locations.push( ['{url_title}', '{project_latitude}', '{project_longitude}', '{categories}{category_name}{/categories}', '{title}'] );


  </script>

{/exp:channel:entries}



<script>


var marker;


function initialize() {

   // To add the marker to the map, use the 'map' property
  var mapOptions = {

      center: { lat: 51.884 , lng: -95.147 },
      zoom: 4

  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


  // Create a new location lat/long var, newLatLng
  var newLatLng;




  var contentString = "<div id='info_window'>this is the info window</div>"


  var infowindow = new google.maps.InfoWindow({

    content: contentString

  });



  var iconBase = '/images/map_icon_';



  $.each( map_locations, function()
  {

    newLatLng = new google.maps.LatLng( this[1] , this[2] );

    marker = new google.maps.Marker({

      position: newLatLng,
      map: map,
      title: this[4],
      icon: iconBase + this[3]

    });

  });



  google.maps.event.addListener(marker, 'click', function() {

    console.log( "This marker's url_title is: " + this[0] );

  });

  google.maps.event.addListener(map, 'click', function() {

    console.log( "Testing map click" );

  });



}



// Initialize the map
google.maps.event.addDomListener(window, 'load', initialize);



</script>

Answer 1

You are trying to add event listener for markers after the loop where marker gets defined rather than in the loop

Try:

   $.each( map_locations, function(){  

    var newLatLng = new google.maps.LatLng( this[1] , this[2] );

    var marker = new google.maps.Marker({

      position: newLatLng,
      map: map,
      title: this[4],
      icon: iconBase + this[3]

    });
     google.maps.event.addListener(marker, 'click', function(marker) {
        console.log( "This marker's url_title is: " + marker.title );
     });

  });