Latest web development tutorials

Googleマップベース

シンプルなGoogleマップを作成します。

それでは、簡単なGoogleマップを作成してみましょう。

以下は、Googleマップのロンドンを示すグラフです。

例

<!DOCTYPE html>
<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を宣言する必要がありますか？

<!DOCTYPE html>

ほとんどのブラウザは、アプリケーションがすべての主要なブラウザと互換性があることを意味するページの文書を、レンダリングHTML5の「標準モデル」を使用します。

何のDOCTYPEタグが存在しない場合に加えて、ブラウザがページ・コンテンツをレンダリングするためのプロミスキャスモード（Quirksモード）を使用します。

ヒント：それは CSSのいくつかの「プロミスキャスモード」ことに留意すべきである、あなたは標準モードを使用することはできません。特定のアプリケーションでは、すべてのサイズの割合に基づいて、親のブロック要素から継承しなければなりません。 あなたは親でモジュールのサイズは、デフォルト値0のx 0ピクセルを指定しない場合。 あなたはパーセンテージを使用したい場合は、次のように、<スタイル>タグ内で宣言することができます。

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

このマップショースタイル宣言モジュール（Googleマップ）は、100％のHTMLの高さでなければなりません。

GoogleマップのAPIキーを追加します。

次の例では、最初の<script>タグには、GoogleマップAPIに含まれている必要があります。

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

主要なパラメータ（キー = YOUR_API_KEY）に配置されたグーグルで生成されたAPIキー。

センサパラメータが必要とされるパラメータは、アプリケーションがユーザーの位置を見つけるために（GPSナビゲーションと同様に）センサを使用するかどうかを示すために使用されます。 パラメータ値はtrueまたはfalseに設定することができます。

HTTPS

アプリケーションがセキュアHTTPである場合（HTTPS：HTTPセキュア）アプリケーションは、GoogleマップAPIをロードするためにHTTPSを使用することができます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

非同期読み込み

ページの読み込みが完了した後に同様に、我々はまた、GoogleマップAPIを読み込むことができます。

次の例では、ページは、Googleマップのロードされたときに完全にロードされた実装するためにwindow.onloadを使用しています。 loadScript（）関数は、GoogleマップAPIの<script>タグを読み込む作成します。 APIは、コールバック関数として完全にロードされた後も）（コールバックへのラベルの末尾に=パラメータを初期化し、初期化が実行されます。

例

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

»をお試しください

カスタムマッププロパティ

地図を初期化する前に、我々は、プロパティマッププロパティを定義するMapオブジェクトを作成する必要があります。

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

中央（中央）

センター属性は、座標（緯度、経度）地図に中心点を作成するために、マップの中心部を、指定します。

ズーム（ズームシリーズ）

ズームマップのズームプロパティは、ステージの数を指定します。 ズーム：0は、フルスケールに地球全体の地図を表示します。

MapTypeId（初期型マップ）

mapTypeId type属性は、最初のマップを指定します。

mapTypeIdは、次の4つのタイプが含まれています。

  • google.maps.MapTypeId.HYBRID：衛星画像は、透明層のメインストリートを表示します
  • google.maps.MapTypeId.ROADMAP：通常通りの地図を表示します
  • google.maps.MapTypeId.SATELLITE：表示する衛星画像
  • google.maps.MapTypeId.TERRAIN：（そのような地形や植生など）の物理的特徴を持つマップを表示します

Googleマップを表示する場所

典型的には、Googleマップの<div>要素で使用されます：

<div id="googleMap" style="width:500px;height:380px;"></div>

注：マップのサイズは、マップのサイズを表示するように設定DIVされますので、私たちは、<div>要素にマップのサイズを設定することができます。

マップオブジェクトを作成します。

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

上記のコードでは、新しいマップを作成します（IDがGoogleマップである）の<div>要素のパラメータ（mapProp）を使用します。

ヒント：複数のマップページを作成する場合は、オブジェクトのみをすることができ、新しいマップを追加する必要があります。

次の例では、（4異なるマップタイプを使用してマップ）4インスタンスマップを定義します。

例

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

»をお試しください

ローディング地図

ページが完全にGoogleマップをロードする前にロードされていることを確実に初期化（）関数を実行することにより負荷後のオブジェクトを初期化するために、ウィンドウの地図：

google.maps.event.addDomListener(window, 'load', initialize);