ホームページ >ウェブフロントエンド >jsチュートリアル >Google Maps JS API v3 を使用して、カスタム InfoWindows を持つ複数のマーカーを Google マップに簡単に追加する方法
Google Maps JS API v3 を使用して、カスタム InfoWindows を持つ複数のマーカーを Google マップに簡単に追加する方法
- Susan Sarandonオリジナル
- 2024-12-18 17:00:11141ブラウズ
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 サイトの他の関連記事を参照してください。