質問:コードを変更して、通常の人間の住所を使用し、地図上で「マーク」を付けるにはどうすればよいですか。
わかりました - 私はしばらくこれに取り組んできましたが、うまくいかないようです。地図上にカスタム マーカーを表示する次のコードがあります。これは 100% 正しく動作します。
function LoadMap() {
var locations = new Array(
[34.01843,-118.491046], [34.006673,-118.486562], [34.009714,-118.480296]
);
var markers = new Array();
var mapOptions = {
center: new google.maps.LatLng(34.019000, -118.455458),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
$.each(locations, function(index, location) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[0], location[1]),
map: map
});
var myOptions = {
content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">1041 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-146, -190),
zIndex: null,
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
position: new google.maps.LatLng(location[0], location[1]),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
marker.infobox = new InfoBox(myOptions);
marker.infobox.isOpen = false;
var myOptions = {
draggable: true,
content: '<div class="marker"><div class="marker-inner"></div></div>',
disableAutoPan: true,
pixelOffset: new google.maps.Size(-21, -58),
position: new google.maps.LatLng(location[0], location[1]),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true
};
marker.marker = new InfoBox(myOptions);
marker.marker.open(map, marker);
markers.push(marker);
google.maps.event.addListener(marker, "click", function (e) {
var curMarker = this;
$.each(markers, function (index, marker) {
// if marker is not the clicked marker, close the marker
if (marker !== curMarker) {
marker.infobox.close();
marker.infobox.isOpen = false;
}
});
if(curMarker.infobox.isOpen === false) {
curMarker.infobox.open(map, this);
curMarker.infobox.isOpen = true;
map.panTo(curMarker.getPosition());
} else {
curMarker.infobox.close();
curMarker.infobox.isOpen = false;
}
});
});
}
私がやりたいことは、「var の場所」を緯度/経度から json の「人間の」アドレスに変更することです。
var locations = new Array(
[34.01843,-118.491046], [34.006673,-118.486562], [34.009714,-118.480296]
);
このようなものに:
var locations = JSON.parse('[{"address":"New Street, Salisbury, UK","content":"hello world from salisbury","status":"live"},{"address":"86000 Poitiers, France","content":"hello world from poitiers"},{"address":"66000 Perpignam, France","content":"hello world from perpignam"}]');
したがって、これらのアドレスを使用する前に、どうにかしてこれらのアドレスをジオコーディングする必要があることは明らかですが、google.maps.Marker position
どうすればよいかわかりません。
マーカーコードを次のように変更してみました:
geocoder.geocode( {'address': '1 George St Sydney NSW 2000 Australia' },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
map: map,
icon: 'transparent.png'
});
}
else {
document.getElementById("text_status").value = status;
}
}
);
しかし、マーカーはレンダリングされません:(
ヘルプ/アドバイスをいただければ幸いです。