Google マップのオーバーレイ
Google Maps＆lt; Span class = "color_h1"オーバーレイ
オーバーレイは、緯度のマップ /オブジェクトの縦方向に縦方向に結合しますマップをドラッグまたはズームすると移動する座標。
地図上のポイントはマーカーを使用して表示され、多くの場合カスタム アイコンが表示されます。マーカーは GMarker タイプのオブジェクトであり、アイコンは GIcon タイプのオブジェクトを使用してカスタマイズできます。 地図上の線はポリライン（点の集合を表す）を使用して表示されます。ラインは GPolyline タイプのオブジェクトです。
- マップ上のエリアは、多角形 (任意の形状のエリアの場合) またはベース オーバーレイ (長方形エリアの場合) として表示されます。ポリゴンは閉じたポリラインに似ているため、任意の形状にすることができます。グラウンド オーバーレイは通常、タイルに直接的または間接的に関連付けられているマップの領域に使用されます。
- 地図自体はタイルオーバーレイを使用して表示されます。独自の一連のタイルがある場合は、GTileLayerOverlay クラスを使用してマップ上の既存のタイルを変更したり、GMapType を使用して独自のマップ タイプを作成したりすることもできます。
- 情報ウィンドウも特別なオーバーレイです。ただし、情報ウィンドウはマップに自動的に追加され、マップは GInfoWindow タイプのオブジェクトのみを追加できることに注意してください。
- Google マップ - マーカー
マークを追加して、地図上のポイントを識別します。デフォルトでは、G_DEFAULT_ICON が使用されます (カスタム アイコンを指定することもできます)。 GMarker コンストラクターは、GLatLng オブジェクトと GMarkerOptions (オプション) オブジェクトをパラメーターとして受け取ります。
マーカーはインタラクティブになるように設計されています。たとえば、デフォルトでは、イベント リスナーで情報ウィンドウを開くためによく使用される「クリック」イベントを受け取ります。 setMap()経由 地図上にマーカーを追加するメソッド:
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
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,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスを実行»インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var marker;
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
インスタンスを実行»「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
Google マップ - アイコン
マーカーはカスタマイズ可能です デフォルトのアイコンを置き換えて表示される新しいアイコン:
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
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,
icon:'pinkball.png'
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
インスタンスの実行»[インスタンスの実行]ボタンをクリックしてオンラインインスタンスを表示します
Google マップ - ポリライン
GPolyline オブジェクトは、地図上に線形オーバーレイを作成します。 GPolyline は一連の点を取得し、それらの点を接続する順序付けられた一連の線分を作成します。
Polyline は次の属性をサポートします:
path - 複数の直線の緯度/経度座標を指定します
ストロークColor - 直線の 16 進数のカラー値を指定します (形式: "#FFFFFF")
-
ストロークOpacity - 線の不透明度を指定します (値は 0.0 です) から 1.0)
ストロークウェイト - 線の幅をピクセル単位で定義します。
編集可能 - ユーザーが行を編集できるかどうかを定義します (true/false)
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックします
Google マップ - ポリゴン
GPolygon オブジェクトは、両方とも順序付けられた一連の点で構成されるという点で GPolyline オブジェクトに似ています。ただし、ポリラインのように 2 つの端点があるのではなく、ポリゴンは閉ループを形成する領域を定義するように設計されています。
ポリラインと同様に、ポリゴンのエッジ(線)の色、太さ、透明度、および囲まれた塗りつぶし領域の色と透明度をカスタマイズできます。色は 16 進数の HTML スタイルである必要があります。
Polygon は次のプロパティをサポートします:
path - 複数の直線の緯度の座標を指定します (最初と最後の座標は等しい)
ストロークカラー - 直線の 16 進数のカラー値を指定します (形式: " #FFFFFF")
ストロークOpacity - 線の透明度を指定します (値は 0.0 です) から 1.0)
ストロークウェイト - 線の幅をピクセル単位で定義します。
fillColor - 閉じた領域の 16 進数の色の値を指定します (形式: "#FFFFFF")
fillOpacity - 塗りつぶしの色の透明度を指定します (値は 0.0 ～ 1.0)
編集可能 - ユーザーが行を編集できるかどうかを定義します (true/false)
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックして、オンラインインスタンス
Google マップ - 円
Circle は次のプロパティをサポートします:
center - 円の中心点パラメータを指定します google.maps.LatLng
radius - 円の半径をメートル単位で指定します
ストロークカラー - 円弧の 16 進数のカラー値を指定します (形式: "#FFFFFF")
ストロークオパシティ - 円弧の透明度を指定します (値は 0.0 です) から 1.0)
ストロークウェイト - 線の幅をピクセル単位で定義します。
fillColor - 円の塗りつぶし値の 16 進数の色の値を指定します (形式: "#FFFFFF")
fillOpacity - 塗りつぶしの色の透明度を指定します (値は 0.0 ～ 1.0)
ユーザーが行を編集できるかどうかを定義します (true/false)
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {
center:amsterdam,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
Google マップ - 情報ウィンドウ
マーカー上にテキスト情報ウィンドウを表示します:
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
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,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
Google マップ - オーバーレイ レイヤー リファレンス マニュアル
Google Maps API リファレンス マニュアル。
