ナビゲーションコントロール、マップタイプコントロール、距離スケールコントロールを表示する標準マップ

スポンサードリンク

ナビゲーションコントロール、マップタイプコントロール、距離スケールコントロールを表示する標準マップ

Posted by 管理人 on 2010年10月16日 Leave a comment (1) Go to comments

ともかくGoogle Maps API v3でともかく地図を表示させてみよう。 Google Map JavaScript API V3 チュートリアルにあるGoogle マップ V3 の「Hello, Woｒld」を表示させてみることに。

◆Google Maps V3　Hello World

うーん。APIキーが無いのがいいですね。　あと目立つのは、コントローラ近くのストリートビューのアイコン。スマートフォン、iPhone（アイフォン）用の位置情報取得用にセンサーの使用有無を示すための sensor パラメータの設定が出来るようになっています。それでは、初期表示の座標を東京あたりに変更して・・・・。

まずあとで、ブログ等で使うことを考えて、bodyイベントのinitialize();は、scriptの中へ。jsファイルは共通で使いたいので、個別に指定する地図タイプ、初期表示座標、ズームは、別のscriptに分けておく。マップタイプは、4つのタイプから選択。

<script type=”text/javascript”>

//◆個別に指定する初期表示の設定

var center = new google.maps.LatLng(35.68407, 139.63623);

var zoom = 10;

var mapTypeId = google.maps.MapTypeId.ROADMAP //通常のデフォルト

//var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル

//var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイルレイヤの組み合わせ

//var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）

</script>

ナビゲーションコントロール、マップタイプコントロール、距離スケール（定規）コントロールも用途に併せて、スムースに作業できるように、予め記述しておいて「//」で消せるように。

//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

disableDefaultUI: false,

//◆ナビゲーションコントロール

navigationControl: true,

navigationControlOptions:

{

//◆通常ズームコントロール

style: google.maps.NavigationControlStyle.DEFAULT,

position: google.maps.ControlPosition.LEFT_TOP

//◆Android ズームコントロール

//style:google.maps.NavigationControlStyle.ANDROID,

//position: google.maps.ControlPosition.BOTTOM_CENTER

},

//◆マップタイプコントロール

mapTypeControl: true,

mapTypeControlOptions:

{

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,

//style: google.maps.MapTypeControlStyle.DEFAULT,

//style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,

position: google.maps.ControlPosition.TOP_RIGHT

},

//◆スケールコントロール

scaleControl: true,

scaleControlOptions:

{

//◆指定無しの場合左下になる

//position: google.maps.ControlPosition.RIGHT_TOP

//position: google.maps.ControlPosition.TOP_CENTER

//position: google.maps.ControlPosition.BOTTOM_CENTER

},

◆Google Maps JavaScript API V3　サンプル

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<title>Google Maps API V3　標準シンプルマップ＆デフォルトコントロール</title> 
<meta name="keywords" content="Google Maps API V3,地図,表示" /> 
<meta name="description" content="Google Maps API V3で標準地図を表示させる。" /> 
<link rel="stylesheet" href="layout-5-master.css" type="text/css" /> 
<!--ここからGoogle Maps API v3-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(35.68407, 139.63623);
    var zoom = 10;

    var mapTypeId = google.maps.MapTypeId.ROADMAP //通常のデフォルト
    //var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル
    //var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイル レイヤの組み合わせ
    //var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）
</script>
<script type="text/javascript"> 
//<![CDATA[    
var map;

function initialize() 
{
	var myOptions = 
	{

		disableDefaultUI: false,//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

		//◆ナビゲーションコントロール
		navigationControl: true,
		navigationControlOptions: 
		{
　　　　　　　　//◆通常 ズームコントロール
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
			//◆Android ズームコントロール
			//style:google.maps.NavigationControlStyle.ANDROID,
			//position: google.maps.ControlPosition.BOTTOM_CENTER
		},
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		//style: google.maps.MapTypeControlStyle.DEFAULT,
		//style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions: 
		{
　　　　　　　　　//◆指定無しの場合左下になる
		//position: google.maps.ControlPosition.RIGHT_TOP
		//position: google.maps.ControlPosition.TOP_CENTER
		//position: google.maps.ControlPosition.BOTTOM_CENTER
		},
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};

　　　　map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

window.onload=initialize;
//]]>
</script> 
</head>
<body >
<div id="map_canvas"></div>
</body>
</html>