Having had a bit of downtime on this project I decided to recap a little from where I left off by starting small. I wanted to hook up my Google Map to database driven data so I started with my record details page. I’ve already manually coded the co-ordinates for my postcode so the object was just to pull out the data and plot the map with the location being the centre point.

Using the below script I was able to hook up my dynamic data to the plotted map:

@section Scripts { 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB"></script> 
} 

@section Styles { 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 80% } 
}

<div id="map_canvas" style="width:500px; height:500px"></div> 
<script type="text/javascript">

    function initialize() {
        var myLatlng = new google.maps.LatLng('@(Model.Latitude.ToString())', '@(Model.Longitude.ToString())');
                
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "@(Model.Title.ToString())"
        });

        var MarkerContent = "<div class=\"marker\">" +
                                "<h2>@(Model.Title.ToString())</h2>" +
                                "<p>@(Model.Postcode.ToString())<br />" +
                                "@(Model.Summary.ToString())</p>" +
                            "</div>";

        var infowindow = new google.maps.InfoWindow({
            content: MarkerContent,
            size: new google.maps.Size(50, 50)
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });

    }

    $(function () {
        initialize();
    }); 
    
</script>

I then started to look at how I could plot multiple locations on my map. I decided to do some research at this point since I also wanted to get the map to centre in on the user’s location. I discovered this neat feature in Google Maps called Google Gears: http://code.google.com/apis/maps/documentation/javascript/basics.html#DetectingUserLocation

With a few simple lines of code I could get my map to centre on my location based on my internet IP address while on a PC – very cool since the browser actually asks you if you want to share your location (for localised content). Had I been on a mobile it would most likely have been more accurate – instead it pointed me to the Bournemouth area of the country. Not entirely accurate but good enough for this stage. I now have the power to provide custom localised content both via the web and mobile.

So, the next mission is to get the list up and running with multiple points finally plotted and then I might actually be able to produce a demo site so we can try this all out. Exciting stuff!!