Wie füge ich meiner Website eine dynamische Google Map hinzu?

Question

Ich entwickle ein Reiseportal für Indien, in dem ich Google Maps für jedes Hotel hinzufügen möchte, das in der Datenbank gespeichert ist. Mein Problem ist, wie erstelle ich die Karte dynamisch?

Answer 1

Dies ist wahrscheinlich der beste Ort, um:

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

Answer 2

Das Folgende ist ein einfaches Beispiel mit ASP.MVC für auf einer Google-Karte eine Reihe von Hotels angezeigt werden.

Die Domain-Objekt ist Hotel:

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

Sie ein Repository benötigen einige Hotels Objekte zu bekommen. Verwenden Sie diese Option im Home-Controller in einem Verfahren namens HotelsForMap():

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

Erstellen Sie eine Teilansicht für die Google-Karte. Lass es uns GoogleMap nennen. Es muss enthalten:

1. Verweis auf die google map 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 zu Hotel Objekte aus JSON Anruf über

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

3. jQuery Karte

   Funktion zur Initialisierung 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. jQuery Marker für Hotels auf der Karte setzen

   Funktion setupLocationMarker (Karte, Hotel) { var latlng = neuer GLatLng (Hotel.Latitude, Hot el.Longitude); var marker = neuer GMarker (latlng); map.addOverlay (Markierung); }

Schließlich haben Sie einen Blick benötigen, die die Teilansicht oben enthält. Die Ansicht muss ein div mit einer ID von map_canvas haben, da dies in der obigen Initialisierungsfunktion referenziert ist. Der Blick sollte folgende Angaben enthalten:

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

Hoffentlich können Sie einige dieser verwenden, auch wenn Sie mit ASP.MVC nicht vertraut sind.

Answer 3

prüfen dieses Beispiel aus: http://blog.sofasurfer.ch/2011/06/27/dynamic-google-map-markers-via-simple-json-file/

Es fügt dynamisch Google Map-Markierungen auf eine JSON-Datei Geocoder google mit