Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

create InfoWindow for clustered markers using Google Maps v3

I m developing a map that will cluster pins to prevent over crowded pin, but I wanted to create an infoWindow that will list all the marker when I click on the marker, I tried to get some help around and found out i can do it using marker.getTitle() but this is not helping me because I m using makrewithLable object and not using title, my question is there any why to add title to the marker or as I prefer to use the label instead to list them in the infowindow. here is a copy of my work.

google.setOnLoadCallback(initialize);
var globalMarker = [];
var map;

  function initialize() {
    var center = new google.maps.LatLng(45.4214, -75.6919);

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      disableDoubleClickZoom: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    var infowindow = new google.maps.InfoWindow();
    for(i=0; i<50; i++) {
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
    //var latLng = new google.maps.LatLng(45.4214, -75.6919)
     markers[i] = new MarkerWithLabel({
       position: latLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "Marker ID = "+i,
       labelAnchor: new google.maps.Point(30, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });
      markers.push(markers);
    makeDiv(i, 15, "Marker #");
     google.maps.event.addListener(markers[i], 'click', function(e) {
    infowindow.setContent('Marker postion: '  + this.getPosition());
    infowindow.open(map, this);});
    }
    var clusterOptions = { zoomOnClick: false }
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    globalMarker = markers.slice();
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';

// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);

//----
//Get markers
var markers = cluster.getMarkers();

var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
    titles += markers[i].getTitle() + "\n";
}
//----


infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);
});
  }

  function makeDiv(index, zoomLevel, content) {
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
  }

  function zoomIn(index, zoomLevel) {
    map.setCenter(globalMarker[index].getPosition());
    map.setZoom(zoomLevel);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

Thank you

like image 892
jprbest Avatar asked May 09 '12 17:05

jprbest


1 Answers

The key change was titles += markers[i].labelContent + "\n";. (You can use the dot notation or markers[i]["labelContent"] to refer back to any property you set). I also changed the part markers.push(markers), and that when zoom is changed the window disappears (because cluster number is likely to change) Everything else looked great!

http://jsfiddle.net/ErYub/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map { margin: 0; padding: 0; height: 100% }

.labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 90px;     
     border: 2px solid black;
     white-space: nowrap;
   }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <script type="text/javascript">

var globalMarker = [];
var map;

  function initialize() {
    var center = new google.maps.LatLng(45.4214, -75.6919);

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      disableDoubleClickZoom: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];


    var infowindow = new google.maps.InfoWindow();
    for(i=0; i<50; i++) {
    var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
    //var latLng = new google.maps.LatLng(45.4214, -75.6919)
     marker = new MarkerWithLabel({
       position: latLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "Marker ID = "+i,
       labelAnchor: new google.maps.Point(30, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });
      markers.push(marker);

    makeDiv(i, 15, "Marker #");
     google.maps.event.addListener(markers[i], 'click', function(e) {
    infowindow.setContent('Marker postion: '  + this.getPosition());
    infowindow.open(map, this);});
    }
    var clusterOptions = { zoomOnClick: false }
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    globalMarker = markers.slice();
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';

// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);

//----
//Get markers
var markers = cluster.getMarkers();

var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
    titles += markers[i].labelContent + "\n";
}
//----


infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);

google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() });

});
  }

  function makeDiv(index, zoomLevel, content) {
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
  }

  function zoomIn(index, zoomLevel) {
    map.setCenter(globalMarker[index].getPosition());
    map.setZoom(zoomLevel);
  }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="sidebar"></div>
  </body>
</html>
like image 190
Heitor Chang Avatar answered Sep 23 '22 00:09

Heitor Chang