Ajouter un marqueur de marqueur simple à Google Map

J'ai de la difficulté à ajouter des fonctionnalités de marqueur de marqueur à ma carte. Ce que je veux, c'est utiliser une icône personnalisée pour mes marqueurs et chaque marqueur possède sa propre fenêtre d'information que je souhaite pouvoir éditer.

Je l'ai accompli, mais maintenant, j'ai des problèmes pour ajouter des fonctionnalités de bibliothèque de marqueur de marqueur. J'ai lu quelque chose à propos de l'ajout de marqueurs au tableau, mais je ne suis pas sûr de ce que cela signifie exactement. En outre, tous les exemples avec le tableau que j'ai trouvé, n'ont pas de fenêtres d'informations et de recherche dans le code que je n'ai pas trouvé le moyen approprié de les ajouter.

Voici mon code (principalement de Geocodezip.com):

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript"> //<![CDATA[ var map = null; function initialize() { var myOptions = { zoom: 8, center: new google.maps.LatLng(43.907787,-79.359741), mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var mcOptions = {gridSize: 50, maxZoom: 15}; var mc = new MarkerClusterer(map, [], mcOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Add markers to the map // Set up three markers with info windows var point = new google.maps.LatLng(43.65654,-79.90138); var marker1 = createMarker(point,'Abc'); var point = new google.maps.LatLng(43.91892,-78.89231); var marker2 = createMarker(point,'Abc'); var point = new google.maps.LatLng(43.82589,-79.10040); var marker3 = createMarker(point,'Abc'); var markerArray = new Array(marker1, marker2, marker3); mc.addMarkers(markerArray, true); } var infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); function createMarker(latlng, html) { var image = '/321.png'; var contentString = html; var marker = new google.maps.Marker({ position: latlng, map: map, icon: image, zIndex: Math.round(latlng.lat()*-100000)<<5 }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); } //]]> </script>

Voici la démo jsfiddle qui fonctionne

Une fois que vous avez créé un cluster de marqueurs, vous souhaitez ajouter des marqueurs. MarkerClusterer prend en charge l'ajout de marqueurs à l'aide de la addMarker() et addMarkers() ou en fournissant un tableau de marqueurs au constructeur:

Quand ils disent ajouter un marqueur au constructeur en fournissant un tableau de marqueurs, il est semblable à ceci:

 var markers = []; //create a global array where you store your markers for (var i = 0; i < 100; i++) { var latLng = new google.maps.LatLng(data.photos[i].latitude, data.photos[i].longitude); var marker = new google.maps.Marker({'position': latLng}); markers.push(marker); //push individual marker onto global array } var markerCluster = new MarkerClusterer(map, markers); //create clusterer and push the global array of markers into it.

Pour l'ajouter à l'aide de addMarker() vous l'ajoutez essentiellement au cluster comme suit:

 var markerCluster //cluster object created on global scope //do your marker creation and add it like this: markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map

Ou si vous souhaitez ajouter un tableau:

 var markerCLuster //cluster object created on global scope //do your marker creation and push onto array of markers: markerCluster.addMarkers(newMarkers, true); //if specify true it'll redraw the map

Voici la référence à MarkerClusterer et aux exemples simples

Selon un extrait de votre code, vous voudriez faire quelque chose comme ceci:

  var mcOptions = {gridSize: 50, maxZoom: 15}; var mc = new MarkerClusterer(map, [], mcOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Add markers to the map // Set up three markers with info windows var point = new google.maps.LatLng(43.65654,-79.90138); var marker1 = createMarker(point,'Abc'); var point = new google.maps.LatLng(43.91892,-78.89231); var marker2 = createMarker(point,'Abc'); var point = new google.maps.LatLng(43.82589,-79.10040); var marker3 = createMarker(point,'Abc'); var markerArray = new Array(marker1, marker2, marker3); mc.addMarkers(markerArray, true);

Vous ne créez pas correctement vos créateurs en nommant tout votre marqueur sur le même marker var, de sorte que vous créez trois marqueurs et que vous l'écrivez lorsque vous l'enregistrez à chaque fois sur le marqueur var. J'ai donc continué et renommez vos marqueurs. J'ai ensuite créé un tableau pour les mémoriser et passer au MarkerClusterer.

MISE À JOUR de votre fonction createMaker. Vous n'avez pas retourné le marqueur et, par conséquent, il n'y a pas de marqueur pour agréger:

 function createMarker(latlng, html) { var contentString = html; var marker = new google.maps.Marker({ position: latlng, map: map, zIndex: Math.round(latlng.lat() * -100000) << 5 }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map, marker); }); return marker; }