グーグルマップ-シェイプ
前の章では、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>次の出力が生成されます-