データベース内に保存された場所があり、それらをループして、Google マップ (API v3) の各場所 (JS と Razor の混合) にマーカーを配置しています。
私が使用しているコードは、数日前に StackOverFlow で尋ねた質問からのものです。問題の 2 つのアドレスは次のとおりです。
- 6-7 Hall Place、スポルディング、PE11、1SA、英国
- 29 ユニオン ストリート、バーミンガム、B2 4LR、英国
これらのアドレスはここに完全に表示されます。しかし、自分のサイト (現在はローカルホスト) でそれらを試してみると、1 つはサンフランシスコに、もう 1 つは米国ルイジアナに表示されます!!
これが私が使用しているJavaScriptコードです（注、いくつかのC＃/ Razorが混在しています）：
<script type="text/javascript">
// Get the map container node.
var mapContainer = $("#myMap");
var geocoder = new google.maps.Geocoder();
// Create the new Goole map controller using our
// map (pass in the actual DOM object). Center it
// above the first Geolocated IP address.
map = new google.maps.Map(
mapContainer[ 0 ],
{
zoom: 11,
center: new google.maps.LatLng(
51.51121,
-0.11982
),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
// I add a marker to the map using the given latitude
// and longitude location.
function addMarker(latitude, longitude, label) {
var myLatlng = new google.maps.LatLng(latitude, longitude);
// Create our "tiny" marker icon
var iconImage = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
// Create the marker - this will automatically place it
// on the existing Google map (that we pass-in).
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
latitude,
longitude
),
title: (label || ""),
icon: iconImage,
center: myLatlng,
zoom: 10
});
// Return the new marker reference.
return(marker);
}
// I update the marker's position and label.
function updateMarker( marker, latitude, longitude, label ){
// Update the position.
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
// Update the title if it was provided.
if (label){
marker.setTitle( label );
}
}
function placeMarkerForAddress(address, city, postcode, country) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: address + ', ' + city + ', ' + postcode + ', ' + country
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
//now add markers
@foreach (var item in Model.Events) {
@:placeMarkerForAddress('@item.Location.Address', '@item.Location.City', '@item.Location.PostCode', 'UK');
@:console.log('boo!');
}
// -------------------------------------------------- //
// -------------------------------------------------- //
// -------------------------------------------------- //
// -------------------------------------------------- //
// Check to see if this browser supports geolocation.
if (navigator.geolocation) {
// This is the location marker that we will be using
// on the map. Let's store a reference to it here so
// that it can be updated in several places.
var locationMarker = null;
// Get the location of the user's browser using the
// native geolocation service. When we invoke this method
// only the first callback is requied. The second
// callback - the error handler - and the third
// argument - our configuration options - are optional.
navigator.geolocation.getCurrentPosition(
function (position) {
// Check to see if there is already a location.
// There is a bug in FireFox where this gets
// invoked more than once with a cahced result.
if (locationMarker) {
return;
}
// Log that this is the initial position.
console.log("Initial Position Found");
// Add a marker to the map using the position.
locationMarker = addMarker(
position.coords.latitude,
position.coords.longitude,
"Initial Position"
);
},
function (error) {
console.log("Something went wrong: ", error);
},
{
timeout: (5 * 1000),
maximumAge: (1000 * 60 * 15),
enableHighAccuracy: true
}
);
// Now tha twe have asked for the position of the user,
// let's watch the position to see if it updates. This
// can happen if the user physically moves, of if more
// accurate location information has been found (ex.
// GPS vs. IP address).
//
// NOTE: This acts much like the native setInterval(),
// invoking the given callback a number of times to
// monitor the position. As such, it returns a "timer ID"
// that can be used to later stop the monitoring.
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
// Log that a newer, perhaps more accurate
// position has been found.
console.log("Newer Position Found");
// Set the new position of the existing marker.
updateMarker(
locationMarker,
position.coords.latitude,
position.coords.longitude,
"Updated / Accurate Position"
);
}
);
// If the position hasn't updated within 5 minutes, stop
// monitoring the position for changes.
setTimeout(
function () {
// Clear the position watcher.
navigator.geolocation.clearWatch(positionTimer);
},
(1000 * 60 * 5)
);
}
</script>
私は混乱しています！FireBug を使用して JS をデバッグしようとしましたが、GeoCode API にある種のタイムアウト メカニズムが必要だと思います。デバッグ モードでコードを移動しようとすると、エラーが発生します。また、マップがユーザーの見つけた位置を中心にしていない理由に頭を悩ませることはできません。