Google Map V3 使い方基本

0_index.html

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>

1_map.js

var mapCanvas = document.getElementById('map');

/* Mapの設定 */
var mapOptions = {
  // 地図の中心の緯度経度を指定
  center : new google.maps.LatLng(35.001, 135.001),

  // ズームレベル（マップの縮尺）の設定
  zoom: 17,

  // 地図タイルの種類
  mapTypeId: google.maps.MapTypeId.ROADMAP,    // 普通の地図（デフォルト）
  //mapTypeId: google.maps.MapTypeId.TERRAIN    // 地形図を表示
  //mapTypeId: google.maps.MapTypeId.SATELLITE  // 航空写真
  //mapTypeId: google.maps.MapTypeId.HYBRID     // 航空写真と道路の地図

  // 地図の動作
  scrollwheel: true,             // ホイールでズームするかどうか
  disableDoubleClickZoom: true,  // ダブルクリックでズームするかどうか
  draggable: true,               // ドラッグで地図移動をするかどうか

  // UIの表示
  mapTypeControl: false,     // 地図タイル
  zoomControl: false,        // 地図のズーム
  streetViewControl: false,  // ストリートビュー
  panControl: false,         // 地図の移動
};

/* Mapの描画 */
var myMap = new google.maps.Map(mapCanvas, mapOptions);


// ----------------------------------------------------


/* マーカーの設定 */
var markerIcon = {
  url: 'ic_marker.png',
  anchor: { x: 10, y: 10},     // 画像の下端中央
  scaledSize: { width: 30, height: 30},
  // origin: { x: 50, y: 10},  // 画像の左上
  // size: { width: 30, height: 30}
};
var markerOptions = {
  position: new google.maps.LatLng(35.001, 135.001),
  icon: markerIcon
};

/* マーカーの描画 */
var marker = new google.maps.Marker(markerOptions);
marker.setMap(myMap);

/* マーカーを沢山描画する
var ary = []; // 緯度経度の入った配列データを用意する
for (var i = 0, l = ary.length; i < l; i++) {
  markerOptions = {
    position: new google.maps.LatLng(ary[i][1], ary[i][0])
  };
  marker = new google.maps.Marker(markerOptions);
  marker.setMap(myMap);
}
*/


// ----------------------------------------------------


/* 矩形の表示 */
var southWest = new google.maps.LatLng(35.001, 135.001);
var northEast = new google.maps.LatLng(35.002, 135.002);
var rectBounds = new google.maps.LatLngBounds(southWest,northEast);
var rectangleOptions = {
  bounds        : rectBounds,
  fillColor     : "#red",
  fillOpacity   : 0.2,
  strokeColor   : "blue",
  strokeOpacity : 1,
  strokeWeight  : 2
};

var rectangle = new google.maps.Rectangle( rectangleOptions );
rectangle.setMap( myMap );

2_fukidashi.js

var mapCanvas = document.getElementById('map');
var mapOptions = {
  center: new google.maps.LatLng(35, 135),
  zoom: 10
};
var myMap = new google.maps.Map(mapCanvas, mapOptions);

/* 吹き出しの作成 */
var infoWindowContent = [
  '<div>',
  '<h1>見出し</h1>',
  '<p><a href="#">リンク</a></p>',
  '</div>'
].join('');

var infoWindowOptions = {
  // 中身にはHTMLを指定することもできる
  content: infoWindowContent
  // 位置は直接 or マーカー指定で設定
  // position: new google.maps.LatLng(35, 135)
};

/* 吹き出し位置にマーカーを指定する（ためにマーカーを作成する） */
var markerOptions = {
  position: new google.maps.LatLng(35, 135)
};
var marker = new google.maps.Marker(markerOptions);
marker.setMap(myMap);

/* 吹き出しの描画 */
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(myMap, marker);

/**
 - markerにclickイベントを付与することで、クリックで吹き出しを表示させることもできる
 - addEventListenerとは異なるので注意

marker.addListener('click', function() {
  infoWindow.open(myMap, this);
});

*/

3_add-html.js

var mapCanvas = document.getElementById('map');
var mapOptions = {
  center: new google.maps.LatLng(35, 135),
  zoom: 10
};
var myMap = new google.maps.Map(mapCanvas, mapOptions);


/* HTML要素の追加 */
var overlayhtml = [
  '<div id="overlay" style="border: 3px solid red;background-color: rgba(0,0,0,.1);">',
  '<p>オーバーレイ</p>',
  '</div>',
].join('');

var overlayLatLng = new google.maps.LatLng(35, 135);


/* コンストラクタ */
function MyOverlayView(overlayhtml, latlng) {
  this.html = overlayhtml;
  this.div;
  this.position = latlng;
}

/* 継承 */
MyOverlayView.prototype = new google.maps.OverlayView();

/* オーバーレイレイヤーを追加した時の動作( setMap()が実行された時 ) */
MyOverlayView.prototype.onAdd = function() {
  this.getPanes().floatPane.innerHTML = this.html;
  this.div = document.getElementById('overlay');
};

/* 地図の表示範囲が変更された時の動作 */
MyOverlayView.prototype.draw = function() {
  var point = this.getProjection().fromLatLngToDivPixel(this.position);
  var elementY = point.y - this.div.offsetHeight / 2;

  /* 地図の再描画に合わせてDOMの位置を調整する */
  this.div.style.top = elementY + 'px';
  this.div.style.left = point.x + 'px';
};

/* オーバーレイレイヤーを削除した時の動作 */
MyOverlayView.prototype.onRemove = function() {
  this.getPanes().floatPane.removeChild(this.div);
  this.div = null;
};

var ol = new MyOverlayView(overlayhtml, overlayLatLng);
ol.setMap(myMap);

readme.md

取り上げているもの

• mapの基本的な生成
• マーカーの生成
• mapへの矩形生成
• 吹き出しの生成
• 独自htmlの追加