googlemaps for asp.net mvc 3

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?

---

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.

---

you're passing data from a model right? What if I want to pass data from my sql database? What should I do? I always get a compilation error. "CS1061: 'System.Collections.Generic.IEnumerable' does not contain a definition for 'longitude' and no extension method 'longitude' accepting a first argument of type 'System.Collections.Generic.IEnumerable' could be found (are you missing a using directive or an assembly reference?)"

Here is my code. @model IEnumerable

    @{ 
        ViewBag.Title = "MVC 3 and Google Maps"; 
    }

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

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

    <h2>Hello, Google Maps</h2>

    <div id="map_canvas" style="width:80%; height:80%"></div>

    <script type="text/javascript">

        function initialize() {
            var latlng = new google.maps.LatLng(@Model.longitude, @Model.latitude);
            var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var map = new google.maps.Map(document.getElementById("map_canvas"), options);
            //google.maps.event.trigger(map, 'resize');
        }

        $(function () {
            initialize();
        }); 

    </script>

---

Google maps are all about javascript, and not about server-side of your application. You simply can use the code for ASP.NET version - the main point is how to create your js-files for google-maps.