Google マップの基本
Google マップの基本
シンプルな Google マップの作成
それでは、シンプルな Google マップを作成しましょう。
以下はイギリスのロンドンを示す Google マップです:
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスを実行する»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
分析例
上記の例は、Google マップの作成プロセスを分析します。
なぜアプリケーションで HTML5 を宣言する必要があるのですか?
ほとんどのブラウザは、「標準モード」の HTML5 ドキュメントを使用してページをレンダリングします。これは、アプリケーションがすべての主要なブラウザと互換性があることを意味します。
さらに、DOCTYPE タグがない場合、ブラウザは混合モード (互換モード) を使用してページ コンテンツをレンダリングします。
ヒント: 「混合モード」の一部の CSS は標準モードでは使用できないことに注意してください。特定のアプリケーションでは、パーセンテージベースのサイズはすべて親ブロック要素から継承する必要があります。親モジュールでサイズが指定されていない場合、デフォルト値は 0 x 0 ピクセルです。パーセンテージを使用したい場合は、次のように <style> タグで宣言できます:
html {height:100%}
body {height:100 % ;margin:0;padding:0}
#googleMap {height:100%}
</style>
このスタイル宣言は、マップ モジュール (GoogleMap) が HTML の高さは 100% です。
Google Maps API キーを追加します
次の例では、最初の <script> タグに Google Maps API を含める必要があります:
Googleによって生成されたAPIキーをkeyパラメータに配置します(key=YOUR_API_KEY) 。
sensor パラメーターは必須であり、アプリケーションがユーザーの位置を特定するためにセンサー (GPS ナビゲーションと同様) を使用するかどうかを指定します。パラメータ値は true または false に設定できます。
HTTPS
アプリケーションがセキュア HTTP (HTTPS: HTTP Secure) アプリケーションの場合、HTTPS を使用して Google をロードできます。 地図 API:
非同期読み込み
同様に、ページが完全に読み込まれた後に Google Maps API を読み込むこともできます。
次の例では、ページが完全に読み込まれた後に window.onload を使用して Google マップを読み込みます。 loadScript() 関数は、load Google Maps API <script> タグを作成します。タグの最後にも追加されました callback=initialize パラメータ、コールバック関数としてのinitialize()は、APIが完全にロードされた後に実行されます:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
</body>
</html>Run Instance»
「Run Instance」ボタンをクリックしてオンラインインスタンスを表示します
定義マッププロパティ
マップを初期化する前に、マッププロパティオブジェクトを作成していくつかのマッププロパティを定義する必要があります:
center:new google.maps.LatLng(51.508742,-0.120850) ,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
center (中心点)
center 属性は地図の中心を指定し、座標を通じて地図上に中心を作成します（緯度、経度）点。
Zoom (ズームレベル)
zoom 属性は、マップのズームレベルを指定します。ズーム: 0 は、地球地図全体のフルズームを示します。
MapTypeId (マップの初期タイプ)
mapTypeId 属性は、マップの初期タイプを指定します。
mapTypeIdには以下の4種類があります:
google.maps.MapTypeId.HYBRID: 衛星画像のメインストリートの透明レイヤーを表示します
google.maps.MapTypeId.ROADMAP: 通常のストリートマップを表示します
google.maps.MapTypeId.SATELLITE: 衛星画像を表示します
google.maps.MapTypeId.TERRAIN: 地形や植生などの自然の特徴を含む地図を表示します
Google マップを表示する場所
通常は Google マップが使用されます<div> 要素内:
注: マップのサイズはdiv に設定するとマップのサイズが表示されるため、
Map オブジェクトを作成します
,mapProp);
上記のコードは、<div> 内のパラメータ (mapProp) を使用しています。 ; 要素 (新しいマップは googleMap という ID で作成されます)。
ヒント: ページ内に複数のマップを作成する場合は、新しいマップ オブジェクトを追加するだけです。
次の例では、4 つのマップ インスタンスを定義します (4 つのマップは異なるマップ タイプを使用します)。
インスタンスの実行»
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
マップをロードします
ウィンドウがロードされた後、initialize() 関数を実行して Map オブジェクトを初期化します。ページが完全に読み込まれた後に、Map オブジェクトが読み込まれます。
