2013-05-15 21 views
10

Chciałbym dodać znaczniki dla każdej firmy wymienionej na mapie Google API V3 w wersji on this page w prawym górnym rogu.Dodawanie wielu znaczników do mapy Google

Nie jestem pewien, jak to zrobić dla wielu kodów pocztowych, ale ten, którego obecnie używamy na individual business pages, używa kodu URL dla dynamicznych kodów pocztowych przechowywanych w bazie danych.

Oto kod używamy do poszczególnych stron:

<script src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script> 

    var map; 
    function initialize() { 
     var mapOptions = { 
     zoom: 15, 
     center: new google.maps.LatLng(51.511214,-0.119824), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var geolocate = function(address, callback) { 
      $.ajax({ 
        url: "http://maps.googleapis.com/maps/api/geocode/json", 
        data: { 
         "sensor": true, 
         "address": address 
        }, 
        dataType: "json", 
        success: function(d) { 
         if (d.status == "ZERO_RESULTS") callback(false); 
         if (d.results && d.results[0] && d.results[0].geometry) { 
          callback({ 
           "ne": d.results[0].geometry.bounds.northeast, 
           "sw": d.results[0].geometry.bounds.southwest, 
           "center": d.results[0].geometry.location 
          }); 
         } 
         else callback(false); 
        } 
       }); 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
     geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) { 
      map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng)); 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

$('#myModal').on('shown', function() { 
    google.maps.event.trigger(map, 'resize'); 
}) 

The kodów pocztowych dla tej strony są generowane w ASP:

if rsDB_Ads("ContactPostcode") <> "" then 
     strTempHTML = "[ContactPostcode]" 
     strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", strTempHTML) 
    Else 
     strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", "") 
    End if 

nadzieję, że ktoś może pomóc ..

Odpowiedz

0

widzę mój kod w tym!

Zakładam, że chcesz dodać znaczniki do mapy. Można to łatwo zrobić, poprawiając kod, który dostarczyłem wcześniej. Po prostu:

 geolocate("Your postcode here", function(c) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(c.center.lat, c.center.lng), 
      map: map, 
      // Your other google maps marker options here 
     }); 
    }); 

Wystarczy powielić ten kod tyle razy, ile to konieczne, drukując go za pomocą ASP, upewniając się, że map i geolocate są zarówno w zakresie. Za każdym razem po prostu dodasz swój znacznik!

20

Na początek, jak zarządzać wieloma markerami. (Skopiuj & Wklej kod do pliku html i działa ...) Następnie można dostosować kod przez wypisując lokalizacji z db itp poprzez klasyczne asp:

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
     <title>Google Maps Multiple Markers</title> 
     <script src="http://maps.google.com/maps/api/js?sensor=false" 
       type="text/javascript"></script> 
    </head> 
    <body> 
     <div id="map" style="width: 1000px; height: 1000px;"></div> 

     <script type="text/javascript"> 
     var locations = [ 
      ['Stadtbibliothek Zanklhof', 47.06976, 15.43154, 1], 
      ['Stadtbibliothek dieMediathek', 47.06975, 15.43116, 2], 
      ['Stadtbibliothek Gösting', 47.09399, 15.40548, 3], 
      ['Stadtbibliothek Graz West', 47.06993, 15.40727, 4], 
      ['Stadtbibliothek Graz Ost', 47.06934, 15.45888, 5], 
      ['Stadtbibliothek Graz Süd', 47.04572, 15.43234, 6], 
      ['Stadtbibliothek Graz Nord', 47.08350, 15.43212, 7], 
      ['Stadtbibliothek Andritz', 47.10280, 15.42137, 8] 
     ]; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 13, 
      center: new google.maps.LatLng(47.071876, 15.441456), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var infowindow = new google.maps.InfoWindow(); 

     var marker, i; 

     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
      })(marker, i)); 
     } 
     </script> 
    </body> 
    </html> 
+1

Chciałbym tylko dodać do to, jeśli zdarzy ci się przekazywać listę zmiennych z django do html, możesz użyć tego, aby przekazać listę jako czytelną wartość: var locations = {{locationlist | safe}}; Część "| safe" jest kluczem do umożliwienia analizowania javascript. – marty331

Powiązane problemy