このページは[API]新google map api v3でサイトに地図を表示するデモに付随するサンプルを掲載しています。

マップオプション

シンプル標準

Javascript

<script>
  var mapZoom = 16;
  var mapCenter = new google.maps.LatLng(35.659524,139.700434);
  function mapCreate(){
    var mapOption={
      zoom:mapZoom,
      center:mapCenter
    };
    var map=new google.maps.Map(document.getElementById('map'),mapOption);
  }google.maps.event.addDomListener(window, 'load', mapCreate);
</script>

google.maps.MapOptions object specification :
https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=ja#MapOptions

サンプル mapOption
描写待機時の背景色
backgroundColor : '#333'
UIの非表示
disableDefaultUI : 'disable'
ダブルクリックズーム操作
disableDoubleClickZoom : 'disable'
ドラック時、マウスオーバ時のカーソル変更
draggableCursor : 'all-scroll' , draggingCursor : 'not-allowed'
キーボードショートカット*
*
マップメーカー*
マップタイプ有無
mapTypeControl : false
マップタイプポジションとスタイル(横並びかタブ選択)
mapTypeControlOptions : { style : 'horizontal_bar' , position : google.maps.ControlPosition.RIGHT_CENTER }
マップタイプ選択
mapTypeId : 'hybrid'
最小ズーム、最大ズーム
minZoom : 7 , maxZoom : 9
再描写時に前マップをクリアの有無
noClear : true
オーバービュー表示の有無、オプション
overviewMapControl : true , overviewMapControlOptions : { opened : true }
パンコントローラーの有無、オプション
panControl : true , panControlOptions : { position : google.maps.ControlPosition.RIGHT_CENTER }
回転コントローラーの有無、オプション
mapTypeId : 'hybrid' , rotateControl : true , rotateControlOptions : { position : google.maps.ControlPosition.RIGHT_CENTER }
スケール表示の有無
scaleControl : true
マウスホイール操作
scrollwheel : false
パノラマストリートビュー設定
setStreetView(panorama)
*上のマップで指定したストリートビューを表示
ストリートビューコントローラーの有無、オプション
streetViewControl : true , streetViewControlOptions : { position : google.maps.ControlPosition.RIGHT_CENTER }
ズームコントローラーの有無、オプション
zoomControl : true , zoomControlOptions : { position : google.maps.ControlPosition.RIGHT_CENTER }
傾き?
mapTypeId : 'satellite' , tilt : 45

▲目次へ

マーカーオプション

マーカーサンプル01(標準)

Javascript

<script>
var mapZoom = 16;
var mapCenter = new google.maps.LatLng(35.659524,139.700434);
function mapCreate(){
var mapOption={
zoom:mapZoom,
center:mapCenter
};
var map=new google.maps.Map(document.getElementById('map'),mapOption);
markerCreate(map);
}
function markerCreate(map){
new google.maps.Marker({
position:mapCenter,
map:map
});
}google.maps.event.addDomListener(window, 'load', mapCreate);
</script>

マーカーサンプル02(配列で複数)

Javascript

<script>
var mapZoom = 16;
var mapCenter = new google.maps.LatLng(35.659524,139.700434);
var markers = [
['地点1',35.659524,139.704434,'icon1.png'],
['地点2',35.659524,139.700434,'icon2.png'],
['地点3',35.659524,139.696434,'icon3.png']
];
function mapCreate(){
var mapOption={
zoom:mapZoom,
center:mapCenter
};
var map=new google.maps.Map(document.getElementById('map'),mapOption);
markerCreate(map);
}function markerCreate(map){
for (var i = 0; i < markers.length; i++) {
new google.maps.Marker({
title:markers[i][0],
position: new google.maps.LatLng(markers[i][1],markers[i][2]),
map:map,
icon:markers[i][3]
});
};
}google.maps.event.addDomListener(window, 'load', mapCreate);
</script>

google.maps.MarkerOptions object specification :
https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=ja#MarkerOptions

サンプル google.maps.Marker
ドロップアニメ
animation : google.maps.Animation.DROP
バウンドアニメ
animation : google.maps.Animation.BOUNCE
マーカーをクリック不可
clickable : false
マーカー移動時、したの×(クロス)マークを非表示
draggable : true , crossOnDrag : false
カーソル変更
cursor : "all-scroll"
マーカーをドラッグ移動
draggable : true
フラットアイコン
flat : true
draggable : true , raiseOnDrag : false
マウスホバー時のタイトル
title : "ここに文字列"
マーカーのzIndex
zIndex : 10

▲目次へ

吹き出し(info window)

吹き出し01(標準)

Javascript

<script>
function mapCreate(){
var mapOption = {
zoom: 16 ,
center: new google.maps.LatLng(35.659524,139.700434)
};
var map = new google.maps.Map(document.getElementById('map'),mapOption);
infowindow(map);
}
function infowindow(map){
new google.maps.InfoWindow({
content : '文字列',
position : new google.maps.LatLng(35.659524,139.700434)
}).open(map);
}google.maps.event.addDomListener(window, 'load', mapCreate);
</script>

▲目次へ