Googleマップ-クイックガイド
Googleマップとは何ですか？
Googleマップは、さまざまな種類の地理情報を提供するGoogleによる無料のWebマッピングサービスです。グーグルマップを使用して、1つはできます。
場所を検索するか、ある場所から別の場所への道順を取得します。
世界中のさまざまな都市の水平および垂直のパノラマストリートレベル画像を表示およびナビゲートします。
特定のポイントでの交通量などの特定の情報を取得します。
Google Mapsは、地図とそこに表示される情報をカスタマイズできるAPIを提供しています。この章では、HTMLとJavaScriptを使用して簡単なGoogleマップをWebページにロードする方法について説明します。
マップをWebページにロードする手順
以下の手順に従って、Webページにマップをロードします-
ステップ1：HTMLページを作成する
以下に示すように、headタグとbodyタグを使用して基本的なHTMLページを作成します-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
..............
</body>
</html>ステップ2：APIをロードする
以下に示すように、スクリプトタグを使用してGoogle MapsAPIをロードまたはインクルードします-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>ステップ3：コンテナを作成する
マップを保持するには、コンテナ要素を作成する必要があります。通常、この目的には<div>タグ（汎用コンテナ）が使用されます。コンテナ要素を作成し、以下に示すようにその寸法を定義します-
<div id = "sample" style = "width:900px; height:580px;"></div>ステップ4：マップオプション
マップを初期化する前に、 mapOptionsオブジェクト（リテラルと同じように作成されます）およびマップ初期化変数の値を設定します。マップには3つの主なオプションがあります。centre、 zoom、および maptypeid。
centre−このプロパティの下で、マップを中央に配置する場所を指定する必要があります。場所を渡すには、を作成する必要がありますLatLng 必要な場所の緯度と経度をコンストラクターに渡すことにより、オブジェクトを作成します。
zoom −このプロパティでは、マップのズームレベルを指定する必要があります。
maptypeid−このプロパティの下で、必要なマップのタイプを指定する必要があります。以下は、Googleが提供する地図の種類です-
- ロードマップ（通常、デフォルトの2Dマップ）
- SATELLITE（写真マップ）
- HYBRID（他の2種類以上の組み合わせ）
- TERRAIN（山や川などの地図）
関数内で、たとえば、 loadMap()、mapOptionsオブジェクトを作成し、以下に示すように、center、zoom、およびmapTypeIdに必要な値を設定します。
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.240498, 82.287598),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}ステップ5：マップオブジェクトを作成する
と呼ばれるJavaScriptクラスをインスタンス化することでマップを作成できます Map。このクラスをインスタンス化するときに、必要なマップのマップとマップオプションを保持するHTMLコンテナを渡す必要があります。以下に示すようにマップオブジェクトを作成します。
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);ステップ6：マップをロードする
最後に、loadMap（）メソッドを呼び出すか、DOMリスナーを追加して、マップをロードします。
google.maps.event.addDomListener(window, 'load', loadMap);
or
<body onload = "loadMap()">例
次の例は、ズーム値12でVishakhapatnamという名前の都市のロードマップをロードする方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
前の章では、基本的なマップをロードする方法について説明しました。ここでは、必要なマップタイプを選択する方法を説明します。
マップの種類
Googleマップには4種類の地図があります。彼らは-
ROADMAP−これはデフォルトのタイプです。どのタイプも選択していない場合は、これが表示されます。選択した地域のストリートビューが表示されます。
SATELLITE −これは選択した地域の衛星画像を表示するマップタイプです。
HYBRID −このマップタイプは、衛星画像の主要な通りを示します。
TERRAIN −これは地形と植生を示すマップタイプです
構文
これらのマップタイプの1つを選択するには、以下に示すように、マップオプションでそれぞれのマップタイプIDを指定する必要があります-
var mapOptions = {
mapTypeId:google.maps.MapTypeId.Id of the required map type
};ロードマップ
次の例は、タイプROADMAP-のマップを選択する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
衛星
次の例は、SATELLITEタイプのマップを選択する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
ハイブリッド
次の例は、タイプHYBRID −のマップを選択する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.Hybrid
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
地形
次の例は、タイプTERRAIN −のマップを選択する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:9,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
ズーム値を増減します
マップのズーム値を変更することで、マップのズーム値を増減できます。 zoom マップオプションの属性。
構文
ズームオプションを使用して、マップのズーム値を増減できます。以下に、現在のマップのズーム値を変更するための構文を示します。
var mapOptions = {
zoom:required zoom value
};例：ズーム6
次のコードは、ズーム値6でVishakhapatnam市のロードマップを表示します。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
例：ズーム10
次のコードは、ズーム値10でVishakhapatnam市のロードマップを表示します。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
デフォルトでは、マップに表示される都市名とオプション名は英語になります。必要に応じて、そのような情報を他の言語で表示することもできます。このプロセスは、localization。この章では、マップをローカライズする方法を学習します。
マップのローカライズ
以下に示すように、URLで言語オプションを指定することにより、マップの言語をカスタマイズ（ローカライズ）できます。
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>例
これは、GoogleMapsをローカライズする方法を示す例です。ここでは、中国語にローカライズされた中国のロードマップを見ることができます。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(32.870360, 101.645508),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>出力
次の出力が生成されます-
Googleマップは、ユーザーが地図を操作できるようにするためのさまざまなコントロールを備えたユーザーインターフェースを提供します。これらのコントロールを追加、カスタマイズ、および無効にすることができます。
デフォルトのコントロール
これがGoogleマップによって提供されるデフォルトのコントロールのリストです-
Zoom−マップのズームレベルを増減するために、デフォルトで+ボタンと−ボタンのあるスライダーがあります。このスライダーは、マップの左側の隅に配置されます。
Pan −ズームスライダーのすぐ上に、マップをパンするためのパンコントロールがあります。
Map Type−このコントロールはマップの右上隅にあります。衛星、ロードマップ、地形などのマップタイプオプションを提供します。ユーザーはこれらのマップのいずれかを選択できます。
Street view−パンアイコンとズームスライダーの間に、ペグマンアイコンがあります。ユーザーはこのアイコンをドラッグして特定の場所に配置すると、ストリートビューを表示できます。
例
これは、Googleマップが提供するデフォルトのUIコントロールを観察できる例です-
UIのデフォルトコントロールを無効にする
Googleマップが提供するデフォルトのUIコントロールを無効にするには、 disableDefaultUI マップオプションの値はtrueです。
例
次の例は、Googleマップが提供するデフォルトのUIコントロールを無効にする方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
すべてのコントロールの有効化/無効化
これらのデフォルトのコントロールに加えて、Googleマップには以下に示す3つのコントロールも用意されています。
Scale− Scaleコントロールは、マップの縮尺要素を表示します。このコントロールはデフォルトでは有効になっていません。
Rotate− [回転]コントロールには、斜めの画像を含むマップを回転できる小さな円形のアイコンが含まれています。このコントロールは、デフォルトでマップの左上隅に表示されます。（詳細については、45°画像を参照してください。）
Overview−マップのズームレベルを増減するために、デフォルトで+ボタンと−ボタンのあるスライダーがあります。このスライダーは、マップの左隅にあります。
マップオプションでは、以下に示すように、Googleマップが提供する任意のコントロールを有効または無効にできます-
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}例
次のコードは、すべてのコントロールを有効にする方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
制御オプション
コントロールオプションを使用して、Googleマップコントロールの外観を変更できます。たとえば、ズームコントロールのサイズを縮小または拡大できます。MapTypeコントロールの外観は、水平バーまたはドロップダウンメニューに変更できます。以下に、ZoomおよびMapTypeコントロールのコントロールオプションのリストを示します。
| シニア番号 | コントロール名 | 制御オプション |
|---|---|---|
| 1 | ズームコントロール |
|
| 2 | MapTypeコントロール |
|
例
次の例は、制御オプションの使用方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
位置決めの制御
コントロールオプションに次の行を追加することで、コントロールの位置を変更できます。
position:google.maps.ControlPosition.Desired_Position,これは、コントロールをマップ上に配置できる利用可能な位置のリストです-
- TOP_CENTER
- TOP_LEFT
- TOP_RIGHT
- LEFT_TOP
- RIGHT_TOP
- LEFT_CENTER
- RIGHT_CENTER
- LEFT_BOTTOM
- RIGHT_BOTTOM
- BOTTOM_CENTER
- BOTTOM_LEFT
- BOTTOM_RIGHT
例
次の例は、MapTypeidコントロールをマップの上部中央に配置する方法と、ズームコントロールをマップの下部中央に配置する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position:google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
マップ上にオブジェクトを描画し、それらを目的の緯度と経度にバインドできます。これらはオーバーレイと呼ばれます。Googleマップは、以下に示すようにさまざまなオーバーレイを提供します。
- Markers
- Polylines
- Polygons
- 円と長方形
- 情報ウィンドウ
- Symbols
地図上の単一の場所をマークするために、Googleマップは提供します markers。これらのマーカーは標準の記号を使用し、これらの記号はカスタマイズできます。この章では、マーカーを追加する方法と、マーカーをカスタマイズ、アニメーション化、および削除する方法について説明します。
単純なマーカーの追加
以下に示すように、マーカークラスをインスタンス化し、latlngを使用してマークする位置を指定することにより、マップの目的の場所に単純なマーカーを追加できます。
var marker = new google.maps.Marker({
position: new google.maps.LatLng(19.373341, 78.662109),
map: map,
});例
次のコードは、ハイデラバード（インド）の都市にマーカーを設定します。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:7
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.088291, 78.442383),
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
マーカーのアニメーション
マップにマーカーを追加した後、さらに進んで、次のようなアニメーションをマップに追加できます。 bounce そして drop。次のコードスニペットは、バウンスとドロップのアニメーションをマーカーに追加する方法を示しています。
//To make the marker bounce`
animation:google.maps.Animation.BOUNCE
//To make the marker drop
animation:google.maps.Animation.Drop例
次のコードは、アニメーション効果が追加されたハイデラバード市のマーカーを設定します-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
マーカーのカスタマイズ
Googleマップが提供するデフォルトのアイコンの代わりに、独自のアイコンを使用できます。アイコンを次のように設定するだけですicon:'ICON PATH'。そして、設定することでこのアイコンをドラッグ可能にすることができますdraggable:true。
例
次の例は、マーカーを目的のアイコンにカスタマイズする方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
マーカーの削除
を使用してマーカーをnullに設定することにより、既存のマーカーを削除できます。 marker.setMap() 方法。
例
次の例は、マップからマーカーを削除する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
marker.setMap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
前の章では、Googleマップでマーカーを使用する方法を学びました。マーカーに加えて、円、多角形、長方形、ポリラインなどのさまざまな形状を追加することもできます。この章では、Googleマップが提供する形状の使用方法について説明します。
ポリライン
Googleマップが提供するポリラインは、さまざまな経路を追跡するのに役立ちます。クラスをインスタンス化することにより、マップにポリラインを追加できますgoogle.maps.Polyline。このクラスをインスタンス化するときに、StrokeColor、StokeOpacity、strokeWeightなどのポリラインのプロパティに必要な値を指定する必要があります。
オブジェクトをメソッドに渡すことで、ポリラインをマップに追加できます setMap(MapObject)。SetMap（）メソッドにnull値を渡すことにより、ポリラインを削除できます。
例
次の例は、デリー、ロンドン、ニューヨーク、北京の各都市間のパスを強調するポリラインを示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:3,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polyline({
path:[
new google.maps.LatLng(28.613939, 77.209021),
new google.maps.LatLng(51.507351, -0.127758),
new google.maps.LatLng(40.712784, -74.005941),
new google.maps.LatLng(28.213545, 94.868713)
],
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2
});
tourplan.setMap(map);
//to remove plylines
//tourplan.setmap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
ポリゴン
ポリゴンは、州または国の特定の地理的領域を強調するために使用されます。クラスをインスタンス化することで、目的のポリゴンを作成できますgoogle.maps.Polygon。インスタンス化するときに、path、strokeColor、strokeOapacity、fillColor、fillOapacityなどのポリゴンのプロパティに必要な値を指定する必要があります。
例
次の例は、ポリゴンを描画してハイデラバード、ナグプール、オーランガバードの各都市を強調表示する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [
new google.maps.LatLng(17.385044, 78.486671),
new google.maps.LatLng(19.696888, 75.322451),
new google.maps.LatLng(21.056296, 79.057803),
new google.maps.LatLng(17.385044, 78.486671)
];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
長方形
長方形を使用して、長方形のボックスを使用して特定の地域または州の地理的領域を強調表示できます。クラスをインスタンス化することで、マップ上に長方形を作成できますgoogle.maps.Rectangle。インスタンス化するときに、path、strokeColor、strokeOapacity、fillColor、fillOapacity、strokeWeight、boundsなどの長方形のプロパティに必要な値を指定する必要があります。
例
次の例は、長方形を使用してマップ上の特定の領域を強調表示する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myrectangle = new google.maps.Rectangle({
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
map:map,
bounds:new google.maps.LatLngBounds(
new google.maps.LatLng(17.342761, 78.552432),
new google.maps.LatLng(16.396553, 80.727725)
)
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>これにより、次の出力が得られます-
サークル
長方形と同じように、円を使用して、クラスをインスタンス化することにより、円を使用して特定の地域または州の地理的領域を強調表示できます。 google.maps.Circle。インスタンス化するときに、path、strokeColor、strokeOapacity、fillColor、fillOapacity、strokeWeight、radiusなどの円のプロパティに必要な値を指定する必要があります。
例
次の例は、円を使用してニューデリー周辺のエリアを強調表示する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(28.613939,77.209021),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(28.613939,77.209021),
radius:150600,
strokeColor:"#B40404",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#B40404",
fillOpacity:0.6
});
myCity.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
マーカー、ポリゴン、ポリライン、その他の幾何学的形状に加えて、マップ上に情報ウィンドウを描画することもできます。この章では、情報ウィンドウの使用方法について説明します。
ウィンドウの追加
情報ウィンドウは、マップにあらゆる種類の情報を追加するために使用されます。たとえば、地図上の場所に関する情報を提供する場合は、情報ウィンドウを使用できます。通常、情報ウィンドウはマーカーに添付されています。インスタンス化することで情報ウィンドウを添付できますgoogle.maps.InfoWindowクラス。以下の特性があります-
Content −このオプションを使用して、コンテンツを文字列形式で渡すことができます。
position −このオプションを使用して、情報ウィンドウの位置を選択できます。
maxWidth−デフォルトでは、情報ウィンドウの幅はテキストが折り返されるまで引き伸ばされます。maxWidthを指定することにより、情報ウィンドウのサイズを水平方向に制限できます。
例
次の例は、マーカーを設定し、その上に情報ウィンドウを指定する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.433053, 78.412172),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
});
infowindow.open(map,marker);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力が生成されます-
マーカー、ポリゴン、ポリライン、その他の幾何学的形状に加えて、事前定義されたベクター画像（シンボル）をマップに追加することもできます。この章では、Googleマップが提供する記号の使用方法について説明します。
シンボルの追加
Googleは、マーカーまたはポリラインで使用できるさまざまなベクターベースの画像（シンボル）を提供しています。他のオーバーレイと同様に、これらの事前定義されたシンボルをマップに描画するには、それぞれのクラスをインスタンス化する必要があります。以下に示すのは、Googleが提供する事前定義されたシンボルとそのクラス名のリストです-
Circle − google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) − google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) − google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) − google.maps.SymbolPath.CIRCLE
これらのシンボルには、path、fillColor、fillOpacity、scale、stokeColor、strokeOpacity、およびstrokeWeightのプロパティがあります。
例
次の例は、Googleマップに事前定義された記号を描画する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
シンボルのアニメーション
マーカーと同じように、バウンスやドロップなどのアニメーションをシンボルに追加することもできます。
例
次の例は、シンボルをマップ上のマーカーとして使用し、それにアニメーションを追加する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
animation:google.maps.Animation.DROP,
draggable:true,
map: map
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
Google Maps JavaScriptプログラムは、ユーザーが生成したさまざまなイベントに応答できます。この章では、Googleマップの操作中にイベント処理を実行する方法を示す例を示します。
イベントリスナーの追加
メソッドを使用してイベントリスナーを追加できます addListener()。リスナーを追加するオブジェクト名、イベントの名前、ハンドラーイベントなどのパラメーターを受け入れます。
例
次の例は、イベントリスナーをマーカーオブジェクトに追加する方法を示しています。プログラムは、マーカーをダブルクリックするたびに、マップのズーム値を5ずつ上げます。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
クリック時に情報ウィンドウを開く
次のコードは、マーカーをクリックすると情報ウィンドウを開きます-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-
リスナーの削除
メソッドを使用して既存のリスナーを削除できます removeListener()。このメソッドはリスナーオブジェクトを受け入れるため、リスナーを変数に割り当てて、このメソッドに渡す必要があります。
例
次のコードは、リスナーを削除する方法を示しています-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>次の出力を生成します-