Thursday, February 2, 2017

Google MAP API group marker together cluster zoom out

This example shows six different ways of adding mouseover event listener to the marker.

Download js-marker-clusterer: https://github.com/googlemaps/js-marker-clusterer

or from

https://github.com/googlemaps/v3-utility-library

test.json:

var data = {
  'points': [
    {lat: 37.4119, lng: -122.1419, idDealer: 1, dealerName: 'test 1', salesDiff: 100},
    {lat: 37.4219, lng: -122.1419, idDealer: 2, dealerName: 'test 2', salesDiff: -100},
    {lat: 37.4319, lng: -122.1419, idDealer: 3, dealerName: 'test 3', salesDiff: 100},
    {lat: 37.4419, lng: -122.1419, idDealer: 4, dealerName: 'test 4', salesDiff: -100},
    {lat: 37.4519, lng: -122.1419, idDealer: 5, dealerName: 'test 5', salesDiff: 100},
    {lat: 37.4619, lng: -122.1419, idDealer: 6, dealerName: 'test 6', salesDiff: -100},
    {lat: 37.4719, lng: -122.1419, idDealer: 7, dealerName: 'test 7', salesDiff: 100},
    {lat: 37.4819, lng: -122.1419, idDealer: 8, dealerName: 'test 8', salesDiff: 100},
  ],
};

test.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MarkerClusterer v3 Simple Example</title>
    <style >
      #map {
        width: 800px;
        height: 600px;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="test.json"></script>
    <script src="jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="../src/markerclusterer_compiled.js"></script>
    <script>
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        });
        var infowindow = new google.maps.InfoWindow();

        var iconURL = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=';
        var iconRed = iconURL + 'D|FF0000|000000';
        var iconOrange = iconURL + 'D|ff9933|000000';
        var iconGreen = iconURL + 'U|33cc00|000000';
        var myIcon = iconGreen;

        var markers = [];

        for (var i = 0; i < data.points.length; i++) {
          var latLng = new google.maps.LatLng(data.points[i].lat, data.points[i].lng);
          var marker = new google.maps.Marker({
            //id: 'test' + i, // this is optional.
            icon: myIcon,
            //icon: genIcon(),
            position: latLng,
            mystr: 'str ' + i,
          });

          // infowindow mouseover - version 1
          google.maps.event.addListener(marker, 'mouseover', setInfoWindowContent_v1(map, marker, infowindow));

          // (preferred) infowindow mouseover - version 2
          // without passing map, marker to the closure function.
          google.maps.event.addListener(marker, 'mouseover', setInfoWindowContent_v2(infowindow));

          // infowindow mouseover - version 3
          google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
            return function() {
              infowindow.setContent(data.points[i].dealerName);
              infowindow.open(map, marker); // or change marker to this.
            }
          })(marker, i));

          // infowindow mouseover - version 4
          google.maps.event.addListener(marker, 'mouseover', (function(marker, dataPoint) {
            return function() {
              infowindow.setContent(dataPoint.dealerName);
              infowindow.open(map, marker); // or change marker to this
            }
          })(marker, data.points[i]));

          // infowindow mouseover - version 5
          // without passing marker to the closure function. Use this instead of marker.
          google.maps.event.addListener(marker, 'mouseover', (function(dataPoint) {
            return function() {
              infowindow.setContent(dataPoint.dealerName);
              infowindow.open(this.map, this);
            }
          })(data.points[i]));

          // infowindow mouseover - version 6
          google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(this.mystr);
            infowindow.open(map, this);
          });

          // click
          google.maps.event.addListener(marker, 'click', function() {
            console.log($(this).attr('mystr'));
          });

          markers.push(marker);
        }

        var markerCluster = new MarkerClusterer(map, markers);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

      $(document).ready(function(){
        $(document).on('click', '#test0', function(e){
          e.preventDefault();
          console.log('clicked!');
        });

        $(document).on('click', '.gan', function(e){
          e.preventDefault();
          console.log('clicked!!!!');
        });
      });

      function setInfoWindowContent_v1(map, marker, infowindow) {
        return function() {
          infowindow.setContent(marker.mystr);
          infowindow.open(map, marker);
        }
      }

      function setInfoWindowContent_v2(infowindow) {
        return function() {
          infowindow.setContent(this.mystr);
          infowindow.open(this.map, this);
        }
      }

      function genIcon() {
        var icon = {
          path: google.maps.SymbolPath.CIRCLE,
          fillOpacity: 1,
          fillColor: '#002664',
          strokeWeight: 1, 
          strokeColor: '#FFFFFF',
          scale: 5 //pixels
        };
        return icon;
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <a class="gan">test</a>
  </body>
</html>

Reference:

http://stackoverflow.com/questions/7044587/adding-multiple-markers-with-infowindows-google-maps-api
http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example/16325107#16325107
http://codereview.stackexchange.com/questions/25882/adding-events-to-multiple-markers-in-a-google-map?newreg=8f84e1facf3c42ac9e3adb089a3c6559

No comments: