目標を達成するための 1 つのオプションを説明させてください。リンクに添付したドキュメントにある、Google Maps API v3 が提供するマーカーと infoWindow オブジェクトを使用します。私が作成した jsFiddle を自由にフォローしてください: http://jsfiddle.net/bgvYH/
まず最初に、オプションを使用してマップを開始します。次のコード スニペットのさまざまな変数が何を表しているかを知っていると仮定します。
var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
マップをさらに好みに合わせてカスタマイズしたい場合は、API リファレンスで設定できるさまざまなオプションを確認してください。これらのオプションは myOptions オブジェクト ( https://developers.google.com/maps /documentation/javascript/reference#MapOptions )。注: マップの中心をレストランの緯度/経度座標に設定しました。これは、 iframe で提供された URL から取得しましたll=41.097905,-73.405006。
次に行うことは、infoWindow に表示するコンテンツを決定することです。そのため、レストラン情報は次のようになります。
var contentString = "<div id='content'>";
contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com</a></p></div></div>";
このプロジェクトの詳細に応じて、将来的にはデータベースまたは JSON オブジェクトからこの情報を取得することになるかもしれません (今のところ、静的 HTML として持っています)。
次に、infoWindow オブジェクトを初期化し、contentString を infoWindow の content オプションに設定します。ここでカスタマイズできる他のオプションがあります (マップ オプションと同様に、InfoWindowOptions のリファレンスをもう一度見てください: https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions )
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infoWindow オブジェクトを設定したら、マーカー オブジェクトを初期化します。これにより、マップ上にドロップ バブルが配置されます。もう一度、map オブジェクトと infoWindow オブジェクトで行ったのと同じように、初期化時にマーカーのオプションを設定します。参照を見て、好みに合わせてさらにカスタマイズできます (そこには、カスタム アイコンを使用できるマーカー - ここでかなり創造的になることができます)。
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Mr. Frosty's Deli and Grill"
});
最後に、ユーザーがマーカーをクリックすると情報がポップアップするように、マーカーと infoWindow を一緒にバインドする必要があります。これは、イベント リスナーを使用して実現され、マーカー変数の「クリック」アクションをリッスンします。Google マップのイベントに関する情報については、このドキュメントをお読みください https://developers.google.com/maps/documentation/javascript/events . 同様に、オブジェクトでリッスンできるさまざまなイベントについては、API リファレンスを参照してください。
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
含める iframe の有効な代替手段が必要です。ただし、マップとその上で実行するアクションを必要に応じてカスタマイズできるようになりました。jsFiddle には、infoWindow 内の見栄えを良くするためのスタイリングも含まれています。
さて、お知らせしたいと思います - あなたが探しているものには別のオプションがあると思います - しかし、私はまだこの API を試していません。これは、登録が必要な Google Places API です。しかし、ドキュメントを読んだ限りでは、やりたいことは実現できるのではないかと思います。それを見て（https://developers.google.com/maps/documentation/places/）、何が良いかを見てください。