Google-maps-types
提供:Dev Guides
Googleマップ-タイプ
前の章では、基本的なマップをロードする方法について説明しました。 ここでは、必要なマップタイプを選択する方法を説明します。
地図の種類
Googleマップは4種類の地図を提供します。 彼らは-
- ROADMAP -これはデフォルトのタイプです。 タイプを選択していない場合は、これが表示されます。 選択した地域のストリートビューが表示されます。
- SATELLITE -これは、選択した地域の衛星画像を表示するマップタイプです。
- ハイブリッド-このマップタイプは、衛星画像上の主要な通りを示しています。
- TERRAIN -これは、地形と植生を示すマップタイプです
構文
これらのマップタイプのいずれかを選択するには、以下に示すように、マップオプションでそれぞれのマップタイプ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>
それは次の出力を生成します-