Google-maps-markers
Googleマップ-マーカー
マップ上にオブジェクトを描画し、それらを目的の緯度と経度にバインドできます。 これらはオーバーレイと呼ばれます。 Googleマップには、以下に示すようなさまざまなオーバーレイが用意されています。
- マーカー
- ポリライン
- ポリゴン
- 円と長方形
- 情報ウィンドウ
- シンボル
地図上の1つの場所をマークするために、Googleマップは*マーカー*を提供します。 これらのマーカーは標準のシンボルを使用し、これらのシンボルはカスタマイズできます。 この章では、マーカーを追加する方法、およびマーカーをカスタマイズ、アニメーション化、および削除する方法について説明します。
シンプルマーカーの追加
以下に示すように、マーカークラスをインスタンス化し、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>それは次の出力を生成します-
マーカーを削除する
- marker.setMap（）*メソッドを使用してマーカーをnullに設定すると、既存のマーカーを削除できます。
例
次の例は、マップからマーカーを削除する方法を示しています-
<!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>それは次の出力を生成します-
