separate functions for each map marker click

Question

How can I call separate functions for each map marker click?

For my example, I tried to scroll to divs on click but it's always taking me to the last map marker's div. How can I scroll to separate divs when I click on separate map markers or is there a possibility to trigger separate functions on map marker click when there are multiple map markers?

Ongoing experiment is here - http://nayague.com/development/tour/multiple-map-click.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <style type="text/css"></style>
    <title></title>

    <script type='text/javascript'>
        //<![CDATA[
        jQuery(function ($) {
            // Asynchronously Load the map API 
            var script = document.createElement('script');
            script.src =
                "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false&callback=initialize";
            document.body.appendChild(script);
        });
        function initialize() {
            var map;
            var bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                mapTypeId: 'roadmap'
            };
            // Display a map on the page
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            map.setTilt(45);
            // Multiple Markers
            var markers = [
                ['Anuradhapura', 8.3372688, 80.3619399, '#1'],
                ['Sigiriya', 7.9568242, 80.7434198, '#2'],
                ['Hotel See Kandy', 7.2930541, 80.6159102, '#3']
            ];
            // Display multiple markers on a map
            var infoWindow = new google.maps.InfoWindow(), marker, i;
            // Loop through our array of markers & place each one on the map  
            for (i = 0; i < markers.length; i++) {
                var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: markers[i][0],
                    url: markers[i][3]
                });
                google.maps.event.addListener(marker, 'click', function () {
                    console.log('click');
                    // console.log($(marker.url));
                    var elem = $(marker.url);
                    console.log(elem);
                    // alert(elem);

                    $('html, body').animate({
                        scrollTop: elem.offset().top
                    }, 1000);
                });
                // Automatically center the map fitting all markers on the screen
                map.fitBounds(bounds);
            }
            // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
                this.setZoom(8);
                google.maps.event.removeListener(boundsListener);
            });
        }
        //]]>
    </script>

</head>

<body>
    <div id='map_canvas' style="width: 100%;height: 100vh"></div>
    <div class="location-details" id='1'>1</div>
    <div class="location-details" id='2'>2</div>
    <div class="location-details" id='3'>3</div>

    <script>
        // tell the embed parent frame the height of the content
        if (window.parent && window.parent.parent) {
            window.parent.parent.postMessage(["resultsFrame", {
                height: document.body.getBoundingClientRect().height,
                slug: "o8u13whg"
            }], "*")
        }
    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

</body>

<style>
    .location-details {
        background-color: blue;
        color: white;
        width: 100%;
        display: inline-block;
        height: 100vh;
    }
    .location-details:nth-child(odd) {
        background-color: red;
    }
</style>

</html>

you need to learn about closures in javascript ... `marker` will always be the LAST marker in the click event handler, because that's what marker is by that time — Jaromanda X, Feb 07 '18 at 04:34
Hi, I replaced "var elem = $(marker.url);" by "var elem = $(this.url);" and it worked. — Gayan Sandamal, Feb 07 '18 at 05:39
Yes by replacing "var elem = $(marker.url);" by "var elem = $(this.url); as mentioned above :) Thanks :-) — Gayan Sandamal, Mar 29 '18 at 17:07

score 0 · Accepted Answer · answered Feb 09 '18 at 14:55

You need function closure on your marker variable. (similar problem solved in the question: Google Maps JS API v3 - Simple Multiple Marker Example for the InfoWindows, using an IIFE).

// function closure on marker variable for the click event
google.maps.event.addListener(marker, 'click', (function(marker) {
  return function(evt) {
    console.log('click');
    var elem = $(marker.url);
    console.log(elem);

    $('html, body').animate({
      scrollTop: elem.offset().top
    }, 1000);
  }
}(marker)))

proof of concept fiddle

code snippet:

jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  script.src =
    "https://maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
});

function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: 'roadmap'
  };
  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);
  // Multiple Markers
  var markers = [
    ['Anuradhapura', 8.3372688, 80.3619399, '#1'],
    ['Sigiriya', 7.9568242, 80.7434198, '#2'],
    ['Hotel See Kandy', 7.2930541, 80.6159102, '#3']
  ];
  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow(),
    marker, i;
  // Loop through our array of markers & place each one on the map  
  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0],
      url: markers[i][3]
    });
    // function closure on marker variable for the click event
    google.maps.event.addListener(marker, 'click', (function(marker) {
      return function(evt) {
        var elem = $(marker.url);

        $('html, body').animate({
          scrollTop: elem.offset().top
        }, 1000);
      }
    }(marker)))
    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  }
  // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
  var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(8);
    google.maps.event.removeListener(boundsListener);
  });
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.location-details {
  background-color: blue;
  color: white;
  width: 100%;
  display: inline-block;
  height: 100vh;
}

.location-details:nth-child(odd) {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map_canvas' style="width: 100%;height: 100vh"></div>
<div class="location-details" id='1'>1</div>
<div class="location-details" id='2'>2</div>
<div class="location-details" id='3'>3</div>

separate functions for each map marker click

1 Answers1