Google Mapに複数のマーカーを追加する

リストされている各ビジネスのマーカーを、右上のGoogle map v3 API on this pageに追加します。Google Mapに複数のマーカーを追加する

複数のポストコードでこれを行う方法はわかりませんが、現在individual business pagesで使用しているものは、データベースに格納されている動的ポストコードにURLencodeを使用しています。

ここでは、個々のページに使用するコードです：

<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'); 
})

そのページの郵便番号をASPで生成されます。

誰かが助けることができる願って

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

出典

2013-05-15 Anonymous

私が見るにはこれで私のコード！

マップにマーカーを追加することを前提としています。これは前に私が提供したコードを微調整することで簡単に行うことができます。簡単に言えば：

 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 
     }); 
    });

だけmapとgeolocateは、範囲内の両方であることを確認して、このコードにASPを使用して、それを印刷して必要な回数を複製します。毎回、あなたのマーカーを追加するだけです！

出典

2013-05-15 15:35:10

最初は、複数のマーカーを管理する方法です。あなたはその後、DBなどを経由して、従来のASPから場所を書き出すことで、コードを適応させることができます（... htmlファイルにコードを貼り付け&をコピーして、それが動作します）：

<!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>

出典

2013-05-17 07:16:09 stare

私はちょうどに追加したいと思いますこれは、あなたがdjangoからhtmlに変数リストを渡すことになった場合、これを使ってリストを読みやすい値として渡すことができます：var locations = {{locationlist | safe}}; "安全な"部分は、javascriptに解析機能を与えるための鍵です。 – marty331

Google Mapに複数のマーカーを追加する

答えて

関連する問題