WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Styled Maps Wizard

f:id:mmmmofu:20161018121944p:plain

GoogleMAPの色変更のスタイルの設定をWEB上で簡単に設定することができる。

Styled Maps Wizard 日本語版

日本語版 Google Maps API Styled Map Wizard

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Styled Map Wizard</title>
  <style>
    #map {
      width: 600px;
      height: 300px;
      margin: 50px auto 0;
    }
  </style>
  <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBO-ckIk-M-qQAMLp1bFG-q-Bqtw0FzeAY&sensor=false&extension=.js'></script>
  <script src="js/map.js"></script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

JavaScript

google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
  var mapOptions = {
    center: new google.maps.LatLng(35.690570, 139.699600),//表示する場所の座標
    zoom: 16,//地図のズームレベル
    zoomControl: false,//ズームレベルのコントロールバー表示
    disableDoubleClickZoom: false,//ダブルクリックした場所をズームするか
    mapTypeControl: false,//マップタイプ切替コントロールを表示するか
    scaleControl: false,//スケールコントロールを表示するか
    scrollwheel: true,//マウススクロールでズームさせるか
    streetViewControl: false,//ストリートビューにできるアイコンを表示するか
    draggable : true,//ドラッグで移動させるか
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);//マップのID取得
  var style = [
  {
    featureType: "administrative.country",
    elementType: "all",
    stylers: [
    { lightness: 0 },
    { hue: "#b2ff00" }
    ]
  },{
    featureType: "all",
    elementType: "all",
    stylers: [
    { lightness: 0 },
    { hue: "#005eff" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
    { hue: "#00ff11" }
    ]
  },{
    featureType: "landscape.man_made",
    elementType: "all",
    stylers: [
    { hue: "#ff9100" }
    ]
  },{
    featureType: "transit.line",
    elementType: "all",
    stylers: [
    { hue: "#eeff00" }
    ]
  },{
    featureType: "transit.station",
    elementType: "all",
    stylers: [
    { hue: "#ffff00" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
    { hue: "#ffc300" }
    ]
  },{
    featureType: "road.highway",
    elementType: "all",
    stylers: [
    { hue: "#ff0044" }
    ]
  },{
    featureType: "all",
    elementType: "all",
    stylers: [
    ]
  }
  ];
  var sampleType = new google.maps.StyledMapType(style);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');

}