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

<!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>

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

`←`	左へ移動
`→`	右へ移動
`↑`	上へ移動
`↓`	下へ移動
`+`	ズームイン
`-`	ズームアウト
`Home`	ビューを 75% 左へ移動
`End`	ビューを 75% 右へ移動
`Page Up`	ビューを 75% 上へ移動
`Page Down`	ビューを 75% 下へ移動

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

目次