Comment ajouter une dynamique de Google Map sur mon site?

Ce qui suit est un exemple de base à l'aide d'ASP.MVC pour l'affichage d'un certain nombre d'Hôtels sur une Carte Google.

Le domaine objet de l'Hôtel:

public class Hotel
{
    public string Name { get; set; }
    public double Longitude { get; set; }
    public double Latitude { get; set; } 
}

Vous aurez besoin d'un référentiel pour obtenir une certaine hôtel objets. L'utiliser dans la Maison de contrôleur dans une méthode appelée HotelsForMap():

public ActionResult HotelsForMap()
{
    var hotels= new HotelRepository().GetHotels();
    return Json(hotels);
}

Créer une vue partielle de la carte google. Appelons cela GoogleMap. Il devra contenir:

1. De référence de l'api google map

   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
   

2. jQuery pour obtenir de l'Hôtel des objets à partir de JSON l'appel ci-dessus

   $(document).ready(function(){
   if (GBrowserIsCompatible())
   {
   $.getJSON("/Home/HotelsForMap", initialiser);
   }
   });

3. jQuery pour initialiser la carte

   la fonction initialize(mapData) {

   var map = new GMap2(document.getElementById("map_canvas"));
   map.addControl(new google.maps.SmallMapControl());
   map.addControl(new google.maps.MapTypeControl());
   
   var zoom = mapData.Zoom;
   map.setCenter(new GLatLng(mapData[0].Latitude, mapData[0].Longitude), 8);
   
   $.each(mapData, function(i, Hotel) {
       setupLocationMarker(map, Hotel);
   });
   

   }

4. de jQuery pour mettre des marqueurs pour les hôtels sur la carte

   fonction setupLocationMarker(carte, l'Hôtel)
   {
   var latlng = new GLatLng(Hotel.La Latitude, De L'Hôtel.Longitude);
   var marker = new GMarker(latlng);
   carte.addOverlay(marker);
   }

Enfin, vous aurez besoin d'une vue qui contient la vue partielle ci-dessus. La vue aurez besoin d'avoir un div avec un id de map_canvas que c'est ce qui est référencé dans la fonction d'initialisation ci-dessus. L'avis doit contenir les éléments suivants:

<h2>Hotels</h2>
<br />
<div id="map_canvas" style="width: 500; height: 500px">
     <% Html.RenderPartial("GoogleMap"); %>
</div>

Nous espérons que vous pouvez utiliser une partie de cela, même si vous n'êtes pas familier avec l'ASP.MVC.

OriginalL'auteur Ryan Spears