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>
こういうコードを簡単に作ってくれるサイトやフォームがあればいいのにね。