JavaScript を使用して Google マップ上の InfoWindows で複数のマーカーを簡単に実装する方法

JavaScript での簡単な Google マップの複数のマーカーの実装

このチュートリアルでは、Google マップで複数のマーカーを作成するための簡素化されたアプローチを検討します。地図。

概要

Google Maps API を探索する初心者にとって、地図上に複数のマーカーをプロットするのは複雑に思えるかもしれません。このチュートリアルでは、シンプルでわかりやすい解決策を提供します。

サンプル データ

Google のサンプル データ配列を使用してみましょう:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  // ... Additional beach locations
];

Map

まず、Google を初期化します。地図:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: { lat: -33.92, lng: 151.25 },
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

マーカーの作成

複数のマーカーを作成するには、location 配列を反復処理します。

var marker, i;
for (i = 0; i <p><strong>追加ポップアップ InfoWindows</strong></p><p>各マーカーをクリックするとビーチ名が表示される情報ウィンドウ:</p><pre class="brush:php;toolbar:false">var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

完全な結果

以下の完全なコード スニペットには、複数のマーカー機能に必要なすべての要素が含まれています:

// HTML with map container

 
 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
 

  <div><p>これらの手順に従うことで、ポップアップ InfoWindows を使用して複数のマーカーを簡単にプロットできます。 Google マップ。</p></div>

以上がJavaScript を使用して Google マップ上の InfoWindows で複数のマーカーを簡単に実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。