Google Map　吹き出し（テキスト）　カスタマイズ方法

JavaScript

Google Mapのカスタマイズ方法

Geocoding - 住所から緯度経度を検索

  • Google　GeocordingでGoogle　Mapで表示したい住所を入力し、検索
  • 取得した緯度経度を以下のScriptのvar pointabs = new GLatLng(緯度,経度);部分にペースト
  • あとは表示したいテキストを変更する。var text = 'テキスト入力';
<body>
<div id="container">
<div id="map" style="width: 800px; height: 450px;"></div>
<script src="http://maps.google.com/maps?file=api&v=2.78&key=ABQIAAAAY3QhpAivo_9PrarKLGIpURS9lFaAjcEgZ-Tj2TWZiSgqOU4cVxQm-Xt_Pvw7dVQq72clu65U5BfDdg"></script> 
<script> 
var map = null;
var geocoder = null;
var pointabs = new GLatLng(35.66,139.73);//ここに取得した緯度経度をペースト
var text = '<div class="google"><h3>〒106-0032 東京都港区六本木６丁目 六本木ヒルズ</h3><br><p>2013年12月18日開講 Webサイト制作科募集中！</p><p><img src="img/01.jpg" width="90px" height="50px"></p></div>';
//タグも打てるので、スタイルシートでの見栄えも変えられる。
var marker = new GMarker(pointabs);
 
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableContinuousZoom();
 
map.enableScrollWheelZoom();
function wheelevent(e) {
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
GEvent.addDomListener(map.getContainer(), "DOMMouseScroll", wheelevent);
map.getContainer().onmousewheel = wheelevent;
 
map.setCenter(pointabs, 17);
map.addOverlay(marker);
marker.openInfoWindowHtml(text);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
}
}
load();
</script>
</div>
</body>