Comment ajouter une carte Google dynamique à mon site?

Question

Je développe un portail de voyages pour l'Inde dans lequel je souhaite ajouter Google Maps de chaque hôtel qui est enregistré dans la base de données. Mon problème est de savoir comment créer la carte dynamiquement?

Answer 1

Ceci est probablement le meilleur endroit pour commencer:

http://code.google.com/apis/maps/documentation/introduction.html

Answer 2

Ce qui suit est un exemple de base en utilisant ASP.MVC pour afficher un certain nombre d'hôtels sur une carte Google Map.

L'objet de domaine est 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 dépôt pour obtenir des objets de l'hôtel. Utilisez ce dans le contrôleur Home dans une méthode appelée HotelsForMap():

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

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

1. Référence à la carte google api

   <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 des objets de l'hôtel de l'appel JSON ci-dessus

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

3. jQuery pour initialiser la carte

   d'initialisation de la fonction

   (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. jQuery pour définir des marqueurs pour les hôtels sur la carte

   fonction setupLocationMarker (map, hôtel) {var latlng = new GLatLng (Hotel.Latitude, Hot el.Longitude); var marqueur = nouveau GMarker (latlng); map.addOverlay (marqueur); }

Enfin, vous aurez besoin d'une vue qui contient au-dessus du point de vue partielle. La vue devra avoir une div avec un identifiant de map_canvas car c'est ce qui est référencé dans la fonction initialize ci-dessus. La vue doit contenir les éléments suivants:

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

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

Answer 3

Découvrez cet exemple: http://blog.sofasurfer.ch/2011/06/27/dynamic-google-map-markers-via-simple-json-file/

Il ajoute dynamiquement des marqueurs de carte Google dans un fichier JSON en utilisant Google géocodage