Question

I am looking to integrate googlemaps into my asp.net mvc 3 website?

I have found some links for asp.net webforms but not for asp.net mvc 3?
Can someone send me a link or a code sample?

Answer 1

Add this javascript to your page head (I assume you’ve already added JQuery):

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Then this div to the body of your view:

<div id="map_canvas" style="width:200px; height:200px; "></div>

Then add this script block to control the map

<script type="text/javascript">
function initialize() {
    var latLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
    var myOptions = {zoom: 7, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready(function () {initialize();});
</script>

Notice how the Latitude and Longitude come from the model, and the view writes is out to the javascript.