Google Maps JavaScript API V3で地図を表示してみる。

  • 投稿
  • 編集

グーグルマップのAPIがV3になってから今まで必要だったAPIキーが不要になっているらしい。

 

地図を表示する機会があったので、会社の所在地でマーカー付のサンプルを作ってみた。

意外に簡単。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GoogleMapsApiV3で地図を表示</title>

<!--↓↓GoogleMapApiV3↓↓-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=ja' charset='UTF-8'></script>
<script type="text/javascript">
	$(document).ready(function() {
	  var mapdiv = document.getElementById('map_canvas');
	  var geocoder = new google.maps.Geocoder();
	  var point = new google.maps.LatLng(34.057488,131.808716);
	  var myOptions = {
			  zoom: 12,
			  center: point,
			  mapTypeControl: true,
			  navigationControl: true,
			  navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL},
			  mapTypeId: google.maps.MapTypeId.ROADMAP,
			  scaleControl: true
	  };
	
	  var map = new google.maps.Map(mapdiv, myOptions);
	  var marker = new google.maps.Marker({
		  position: point,
		  map: map,
		  draggable: true
	  });
	});
</script>
<!--↑↑GoogleMapApiV3↑↑-->

</head>
    <body>
        <div id="map_canvas" style="width: 560px; height: 250px;"></div>
    </body>
</html>

 

こういうコードを簡単に作ってくれるサイトやフォームがあればいいのにね。