web-dev-qa-db-ja.com

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

リストされている各ビジネスのマーカーをGoogleマップv3APIに追加しようとしています このページ 右上隅にあります。

複数の郵便番号に対してこれを行う方法はわかりませんが、現在 個々のビジネスページ で使用しているものは、データベースに保存されている動的な郵便番号に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

誰かが助けてくれることを願っています。

javascriptgoogle-mapsgoogle-maps-api-3asp-classic
10
user2367386

まず、複数のマーカーを管理する方法を説明します。 （コードをコピーしてhtmlファイルに貼り付けると機能します...）次に、クラシック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>
20
stare

これに私のコードが表示されます！

地図上にマーカーを追加したいと思っています。これは、以前に提供したコードを微調整することで簡単に実行できます。非常に単純に：

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

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

0
Sébastien Renauld