Google Map API - web-0127のブログ

Google Maps API

Google Maps API を使ってできること

APIを利用するために「API Key」は不要
iPhoneやAndroidに対応した、「高速な読み込み」と「動作」
新しいMVC フレームワークを採用

Static Maps API

シンプルな Google マップの画像を、ウェブページやモバイルサイトに簡単に埋め込むことができます
JavaScript や動的なページ読み込みは必要ありません
注: Google Static Maps API は、Maps API キーがなくても使用できるようになりました

Static Maps API V2 デベロッパーガイド

Google Static Maps API を使用すると、JavaScript や動的なページ読み込みを使うことなく、Google マップ画像をウェブページに埋め込むことができます
詳細はページ「Static Maps API V2 デベロッパーガイド」をよく読むこと

URL パラメータ

Google Static Maps API の URL は、次の形式で指定する必要があります

http://maps.google.com/maps/api/staticmap?《場所のパラメータ》

場所のパラメータ

center：地図のすべての端から等距離の位置にある地図の中心を定義します。このパラメータは、場所をカンマ区切りの「緯度、経度」の組（例: 「40.714728,-73.998672」）で記述したものになります
zoom：地図の拡大レベルを決定する「ズームレベル」を定義します

緯度経度とは？

緯度（latitude）経度（longitude）とは、天体上の位置を示す座標のことである
緯度経度さえあれば、地球上のあらゆる地点を正確に機械的に特定することができる
Google Maps APIでは主に緯度経度を指定して、地図を表示したり、アイコンを表示させたりします

日本測地系：明治時代に東京天文台を基準に定められた
世界測地系：衛星などを用いて地球の形状など明らかにし、世界的な整合性をもって構築された国際的に定められている。法改正により世界測地系への移行が進んでいる
国土地理院

緯度経度検索

Geocoding

SEAGATE

緯度経度検索 : Plus-α.net

Google Maps ジオコーディング：逆ジオコーディング

記述の仕方

http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Map Test</title>
</head>
<body>
<a href="http://maps.google.com/maps/api/staticmap?center=35.681382,139.766084&zoom=16&size=320x480&maptype=roadmap&sensor=false">マップで見る</a>
</body>
</html>

Maps JavaScript API

JavaScript を使って、Google マップをウェブページに埋め込むことができます

緯度・経度を取得
マーカーを表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【１】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.681382,139.766084);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 15,
    
    // ■地図の中心を指定（上記で設定の緯度経度latlng）
    center: latlng,
    
    // ■地図のタイプ設定
    // 　ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"東京駅"
  });
  marker1.setMap(map);

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

  // ■マーカーの追加表示（緯度経度指定の場合）
  var myLatlng = new google.maps.LatLng(緯度.経度);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  title:"皇居"
  });
  marker2.setMap(map);

マーカーを追加する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【１】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.681382,139.766084);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 14,
    
    // ■地図の中心を指定（上記で設定の緯度経度latlng）
    center: latlng,
    
    // ■地図のタイプ設定
    // 　ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"東京駅"
  });
  marker1.setMap(map);
	
  // ■マーカーの追加表示（緯度経度指定の場合）
  var myLatlng = new google.maps.LatLng(35.6853438,139.7530782);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  title:"皇居"
  });
  marker2.setMap(map);

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

吹き出しを付ける

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【１】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.681382,139.766084);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 14,
    
    // ■地図の中心を指定（上記で設定の緯度経度latlng）
    center: latlng,
    
    // ■地図のタイプ設定
    // 　ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"東京駅"
  });
  marker1.setMap(map);
	
	// ■マーカーの追加表示（緯度経度指定の場合）
  var myLatlng = new google.maps.LatLng(35.6853438,139.7530782);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  title:"皇居"
  });
  marker2.setMap(map);
	
	// ■マーカーをクリックしたら、情報ウィンドウを表示
  var marker1text = 'ここは<span style="color:#f00;">東京駅</span>です'
  var infowindow1 = new google.maps.InfoWindow({
    content: marker1text,
    maxWidth:200
  });
  google.maps.event.addListener(marker1, 'click', function() {
  infowindow1.open(map,marker1);
  });
	
  var marker2text = 'ここは<span style="color:#f00;">皇居</span>です'
  var infowindow2 = new google.maps.InfoWindow({
    content: marker2text,
    maxWidth:200
  });
  google.maps.event.addListener(marker2, 'click', function() {
  infowindow2.open(map,marker2);
  });

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>

Google Maps API

Static Maps API

Static Maps API V2 デベロッパー ガイド

URL パラメータ

場所のパラメータ

緯度経度とは？

緯度経度検索

記述の仕方

Maps JavaScript API

Static Maps API V2 デベロッパーガイド