All geek questions in one place

Create InfoWindow for clustered tokens using Google Maps v3

I am developing a map that will put pins to prevent overflowing the pins, but I wanted to create infoWindow that will display the entire marker, when I click on the marker, I tried to get some help and found out that I can do this with marker.getTitle () but that doesn’t help me because I use the makrewithLable object and don’t use the title, my question is: why add a title to the marker or how do I prefer to use the label instead to list them in the info industry. 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);

thanks

+6
source share
1 answer

The key change was titles += markers[i].labelContent + "\n"; . (You can use dot notation or markers[i]["labelContent"] to return to any property you set). I also changed part of markers.push(markers) and that when zooming in, the window disappears (since the cluster number may 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>
+11
source

Source: https://habr.com/ru/post/915304/

More articles:


All Articles