Я хочу интегрировать MarkerCluster с моей картой Google, основанной на базе данных, и изо всех сил пытаюсь заставить ее работать.
Первый пример кода генерирует карту из базы данных, которая уже имеет несколько маркеров lat / long.
Второй бит кода – это простая версия кластера маркеров.
Как я могу объединить эти два? Оба являются настройками для V3 api.
<script type="text/javascript"> //<![CDATA[ var customIcons = { restaurant: { icon: 'http://img.ruphp.com/php/mm_20_blue.png', shadow: 'http://img.ruphp.com/php/mm_20_shadow.png' }, bar: { icon: 'http://img.ruphp.com/php/mm_20_red.png', shadow: 'http://img.ruphp.com/php/mm_20_shadow.png' } }; function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(47.6145, -122.3418), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]> </script> Ниже приведен пример кластера Marker:
var center = new google.maps.LatLng(37.4419, -122.1419); var options = { 'zoom': 13, 'center': center, 'mapTypeId': google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), options); var 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); } var markerCluster = new MarkerClusterer(map, markers);
С большим количеством проб и ошибок и некоторой помощью от @geocodezip:
<script type="text/javascript"> //<![CDATA[ var customIcons = { restaurant: { icon: 'http://img.ruphp.com/php/mm_20_blue.png', shadow: 'http://img.ruphp.com/php/mm_20_shadow.png' }, bar: { icon: 'http://img.ruphp.com/php/mm_20_red.png', shadow: 'http://img.ruphp.com/php/mm_20_shadow.png' } }; function load() { var cluster = []; var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(47.6145, -122.3418), zoom: 13, mapTypeId: 'roadmap' }); var infowindow = new google.maps.InfoWindow(); // Change this depending on the name of your PHP file downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent("Info on member here"); infowindow.open(map, marker); } })(marker, i)); cluster.push(marker); } var mc = new MarkerClusterer(map,cluster); }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]> </script>
Вы спросили: «Как включить второй пример в первый»?
Перенесите первый пример в API v3, этот пример, переведенный с руководства Mike Williams v2, может помочь.
Затем добавьте кластеризацию и пользовательские инфо-окна (которые у вас есть в вашем втором примере).