web ページに Google Map を追加する方法を学習します。
簡単な基本 web ページから始めましょう。
マップを表示したい場所に <div> 要素を追加します:
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
Try it Yourself »
マップのサイズを設定します:
マップを表示する関数を作成します:
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);
}
Try it Yourself »
mapCanvas 変数は、マップの HTML 要素です。
mapOptions 変数は、マップのプロパティを定義します。
center は、緯度と経度座標を使用して、マップをどこに配置するかを指定します。
zoom プロパティは、マップのズームレベルを指定します(ズームレベルを試してみてください)。
google.maps.Map オブジェクトは、mapCanvas と mapOptions をパラメータとして作成されます。
map の機能は、Google の JavaScript ライブラリによって提供されます:
Google マップの詳細については、Google Maps チュートリアルをご覧ください。