Google Maps Geocode Showing Wrong Address

Question

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:

1. 6-7 Hall Place, Spalding, PE11, 1SA, UK
2. 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.

Answer 1

Try using the full address for your geolocator request, and setting the region to UK (if all of your addresses are in the UK), this should narrow down the search a bit

function placeMarkerForAddress(address, city, postcode, country) {
    var fullAddress = address + ', ' + city + ', ' + postcode + ', ' + country;
    geocoder.geocode( { 'address': fullAddress, 'region':'UK'}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: fullAddress
            });
        } else {
                alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

And when you get the updated position you need to centre the map as well as move the marker

function updateMarker( marker, latitude, longitude, label ){
    // Update the position.
    var pos=new google.maps.LatLng(latitude,longitude);
    // move the marker
    marker.setPosition(pos);
    // centre the map
    marker.getMap().setCenter(pos);
    // Update the title if it was provided.
    if (label){
        marker.setTitle( label );
    }
}