Googleマップをカスタマイズ [Google Maps API]

Google Maps APIを、gmaps.jsとStyled Map Wizardを用いてカスタマイズしています。


gmaps.js
http://hpneo.github.io/gmaps/

Styled Map Wizard
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

ここに地図が表示されます

Load Files



HTML

ここに地図が表示されます

JavaScript

$(function(){


  var map = new GMaps({
    div: '#map_canvas', // マップを描画する要素
    lat: 36.926149, // 地図中心の緯度経度
    lng: 138.8108743, // 地図中心の緯度経度
    zoom: 14, // ズーム
    scrollwheel: false // ホイールによるズーム無効化
  });

  // マーカー
  map.addMarker({
    lat: 36.911149, // マーカーの緯度経度
    lng: 138.8108743, // マーカーの緯度経度
    icon: './[path]/map_marker.png', //アイコン画像
    title: '神立高原はココだお' // マーカーのタイトル
  });

  // 経路
  map.drawRoute({
    origin: [36.93517, 138.8079863], // 出発地
    destination: [36.911149, 138.8108743], // 目的地
    travelMode: 'driving', // 移動手段
    strokeColor: '#dd0000', // マーカーの色
    strokeOpacity: 0.6, // マーカーの不透明度
    strokeWeight: 6 // マーカーの太さ
  });

  // デザインカスタマイズ(モノトーン)
  // JSONデータはStyled Maps Wizardで生成される
  var mapstyle = 
  [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 }
      ]
    },{
      featureType: "all",
      elementType: "labels",
      stylers:[
        { visibility: "off" }
      ] 
    },{
      featureType: "administrative",
      elementType: "all",
      stylers: [
        { visibility: "on" }
      ] 
    },{
      featureType: "landscape",
      elementType: "all",
      stylers: [
        { visibility: "on" }
      ] 
    },{
      featureType: "transit",
      elementType: "all",
      stylers: [
        { visibility: "on" }
      ] 
    }
  ];
  map.setOptions({
    styles: mapstyle
  });


});

CSS

.block_map {
  margin: 40px 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 60%;
  position: relative;
  top: 0;
  left: 0;
}
#map_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#map-embed img {
  max-width: none;
}