Google Maps JS API v3 を使用して、カスタム InfoWindows を持つ複数のマーカーを Google マップに簡単に追加する方法-jsチュートリアル-php.cn

Google Maps JS API v3 を使用して、カスタム InfoWindows を持つ複数のマーカーを Google マップに簡単に追加する方法

Susan Sarandon

リリース： 2024-12-18 17:00:11

オリジナル

142 人が閲覧しました

How to Easily Add Multiple Markers with Custom InfoWindows to a Google Map using the Google Maps JS API v3?

Google Maps JS API v3 - 複数のマーカーの簡単な例

Google マップ上に複数のマーカーを作成することは、特に困難な作業になることがあります。 API の初心者向け。このプロセスを簡略化するために、必要な手順をガイドする簡単な例を詳しく説明します。

Google が提供する次のデータ配列について考えてみましょう。

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

ログイン後にコピー

目的は、プロットすることです。これらのマーカーを地図上に配置し、マーカーをクリックすると名前を含む情報ウィンドウを表示します。

<!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?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div>

ログイン後にコピー

このコードオーストラリアのシドニーを中心とした地図をズームレベル 10 で作成します。配列内の各ビーチのマーカーが動的に生成され、各マーカーをクリックすると、ビーチの名前を含む情報ウィンドウが表示されます。

イベントが発生することに注意してください。クリックイベントのリスナーはクロージャを使用して、コールバック関数の実行中にマーカーと配列インデックスの値を保持します。

次の手順に従うことで、次のことができます。カスタム infoWindows を使用して複数のマーカーを独自の Google マップビジュアライゼーションに簡単に追加できます。

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