Googleマップとは何ですか?
GoogleマップはGoogleAPIです
GoogleFontsはGoogleAPIです
GoogleChartsはGoogleAPIです
ウェブページにGoogleマップを追加する方法を学びます。
おっとっと!何かがうまくいかなかった。
私の最初のGoogleマップ
簡単なWebページから始めます。
マップを表示する場所に<div>要素を追加し、マップのサイズを設定します。
例
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:100%;height:400px;">My map will go here</div>
</body>
<html>
マップを表示するJavaScript関数を追加します。
例
function myMap() {
var mapCanvas =
document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2),
zoom:
10
};
var map = new google.maps.Map(mapCanvas,
mapOptions);
}
mapCanvas変数は、マップのHTML要素です。
mapOptions変数は、マップのプロパティを定義します。
centerプロパティは、マップを中央に配置する場所を指定します(緯度と経度の座標を使用)。
Zoomプロパティは、マップのズームレベルを指定します(ズームレベルを試してみてください)。
google.maps.Mapオブジェクトは、mapCanvasとmapOptionsをパラメーターとして使用して作成されます。
最後にGoogleAPIを追加します
マップの機能は、GoogleにあるJavaScriptライブラリによって提供されます。
例
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
Googleマップチュートリアル
Googleマップの詳細については、Googleマップチュートリアルをご覧ください。