グーグルマップのピンの立て方

質問

お世話様です。

グーグルマップにピンを立てたいと思います。

そこをクリックすると吹き出しが出て

文字が出て、写真を表示したいと思います。

そのようにするにはどうすればいいでしょうか？

回答No.1

noname#247307 · ベストアンサー

これはGoogle Maps APIを使います。APIは使ったことありますか？　どの程度、APIの使い方をご存知でしょうか。

例えば、マップにマーカー（ピンのこと）をたて、それをクリックしたら情報ウインドウが現れるようにする場合、JavaScriptで以下のように記述します。

var myLatlng = new google.maps.LatLng( 緯度・経度を指定 );
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById(" マップを表示するタグのIDを指定 "), mapOptions);

var contentString = 　表示する内容をHTMLで用意する　;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"タイトル"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Google Maps APIのドキュメントに詳しく説明されていますのでそれを参考にして下さい。

参考URL：

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ja

お礼

詳しいご説明ありがとうございます。　上記は内容は知っていますが。使ったことがありません。使ってみたいと思います。