初心者からのweb勉強

2012-09-05 Google API

Google Map API


○Static Maps API


緯度経度を検索する↓
クネヒト API
(日本と世界の数値が若干違う。世界の方を基準に考えた方がよさそう)

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.710058,139.810718&zoom=16&size=320x480&maptype=roadmap&sensor=false">マップで見る</a>
</body>
</html>

f:id:ponkan7:20120905172400p:image



○Maps JavaScript API
こちらはJavaScriptを使って埋め込む。
マーカー表示あり。
スカイツリーのMAPを入れこんでみました。

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

<!-- 【1】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.710058,139.810718);
  
  // ■地図必須プロパティを設定
  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>

f:id:ponkan7:20120905172401p:image


---------------------------------------------------------
さらにマーカー、吹き出しを追加して、ズームレベルを下げる。
吹き出しは出来たけども、吹き出しのカスタム(サイズを変えるなど)がうまくできない。。

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

<!-- 【1】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.710058,139.810718);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 12,
    
    // ■地図の中心を指定(上記で設定の緯度経度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.6587039,139.7454081);
  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>

f:id:ponkan7:20120905173152p:image

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/ponkan7/20120905/1346845739
リンク集