Bir Google Haritası üzerinde işaretler çizmek için AJAX ve PHP / MySQL kullanan bir istemci için bir harita geliştiriyorum.
Kullanıcı arama posta kodu ve harita otomatik posta kodu bağlı olarak en yakın puan yakınlaştırır - Ben haritanın üzerinde çeşit bir giriş alanı eklemek gerekiyor. Ben araştırdım ve kalıcı bir çözüm arayan birçok saatlerce web sürünerek gelmiştir.
(Ben sadece değerleri ayrıştırmak için bir işlev gerekir varsayıyorum)
İşte ben kullanıyorum benim kod:
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(55.378051, -3.435973), 6);
GDownloadUrl("sources/ajax/ajax-maps-xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, id);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type, id) {
var marker = new GMarker(point, customIcons[type]);
var stripName = name.toLowerCase().replace(/ /gi, '-');
var html = "<div class='gmap-details'><b>" + name + "</b> <br /><a href='venues/"+id+"/"+stripName+"'>View Full Details →</a></div>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>