WEBOPIXEL

GoogleMapをとりあえずさくっと表示したいときのjavascript

Posted: 2011.09.07 / Category: javascript / Tag: 

GoogleMapはカスタマイズでさまざまなことができますが、コーポレートサイトで使用するときはほとんどピンを立たせてウィンドウを表示させるくらいなんじゃないかなと。
さくっと表示させたいときはiFrameでいいんじゃね? というつっこみ聞かなかったことにしてとりあえずJavascriptでコピペで使えるコードです。

Sponsored Link

html

divに適当にidを割り当てます。
ここではgmapとしました。

html

 
	<div id="gmap" style="width: 590px; height: 400px;"></div>
	

javascript

javascriptはheadの最後か、bodyを閉じる直前とかいつもの位置に入れましょう。

javascript

 
	<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
	<script type="text/javascript"> 
	window.onload = initialize;
	function initialize() {
	//ピンにマウスオーバーしたときのテキスト
	var markTitle = '東京都庁';
	//ウィンドウのコンテンツ
	var contentString = '<div id="content" style="width: 250px; height: 80px;">'+
	   '東京都庁<br />〒163-8001 東京都新宿区西新宿2-8-1'+
	   '</div>';
	//緯度・経度
	var myLatlng = new google.maps.LatLng(35.689488,139.691706);
	var myOptions = {
		zoom: 16,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: false
	}
	var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
	var infowindow = new google.maps.InfoWindow({
		content: contentString
	});
	var marker = new google.maps.Marker({
		position: myLatlng,
		map: map,
		title: markTitle
	});
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
	}
	</script>
	

htmlはidを変更した場合は、19行目の「getElementById」を変更します。