I have locations stored within a database, and I am looping through them and putting markers down for each location (mix of JS and Razor) on Google Maps (API v3).
The code I am using is from a question I asked a couple of days ago on StackOverFlow. The two addresses in question are:
- 6-7 Hall Place, Spalding, PE11, 1SA, UK
- 29 Union Street, Birmingham, B2 4LR, UK
These addresses show perfectly on here. But when I try them on my site (localhost currently), one shows up in San Francisco and the other in Louisiana USA !!
Here is the JavaScript code I'm using (note, some C#/Razor mixed in):
<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>
I am confused! I tried debugging the JS using FireBug, but I think there must be some sort of time-out mechanism on the GeoCode API, it gives me errors when I try moving through the code in debug mode. Also, I cannot wrap my head around why my map isn't centring around the User's found position.
