WEBデザインの勉強

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

簡単にGoogleMAPがカスタマイズできるウェブサービスGoogle Map Builder

f:id:mmmmofu:20161013212732p:plain

デモはこちら

http://efu.sakura.ne.jp/web/mapbuilder/
デモのテーマは「Black and White」を使用しました。

サイトはこちら

mapbuildr.com

f:id:mmmmofu:20161013214426p:plain

f:id:mmmmofu:20161014113432p:plain

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Google Map Builder</title>
  <link rel="stylesheet" href="css/style.css">
  <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>

CSS

#map {
  height:400px;
  width:550px;
  margin: 50px auto 0;
  border: 10px solid #000;
  padding: 10px;
}
.gm-style-iw * {
  display: block;
  width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
  margin: 0;
  padding: 0;
}
.gm-style-iw a {
  olor: #4272db;
}

JS

google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
    var mapOptions = {
        center: new google.maps.LatLng(35.729026,139.711473),
        zoom: 16,
        zoomControl: false,
        disableDoubleClickZoom: false,
        mapTypeControl: false,
        scaleControl: false,
        scrollwheel: true,
        panControl: true,
        streetViewControl: false,
        draggable : true,
        overviewMapControl: true,
        overviewMapControlOptions: {
            opened: false,
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [ { "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": "on" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative", "stylers": [ { "visibility": "off" } ] },{ "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" }, { "weight": 1 } ] },{ "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "weight": 0.8 } ] },{ "featureType": "landscape", "stylers": [ { "color": "#ffffff" } ] },{ "featureType": "water", "stylers": [ { "visibility": "off" } ] },{ "featureType": "transit", "stylers": [ { "visibility": "off" } ] },{ "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "elementType": "labels.text", "stylers": [ { "visibility": "on" } ] },{ "elementType": "labels.text.stroke", "stylers": [ { "color": "#ffffff" } ] },{ "elementType": "labels.text.fill", "stylers": [ { "color": "#000000" } ] },{ "elementType": "labels.icon", "stylers": [ { "visibility": "on" } ] } ],
    }
    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [
    ['池袋駅', 'undefined', 'undefined', 'undefined', 'undefined', 35.7285729, 139.7117442, 'https://mapbuildr.com/assets/img/markers/hollow-pin-green.png']
    ];
    for (i = 0; i < locations.length; i++) {
      if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
      if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
      if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
      if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
      if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
      marker = new google.maps.Marker({
        icon: markericon,
        position: new google.maps.LatLng(locations[i][5], locations[i][6]),
        map: map,
        title: locations[i][0],
        desc: description,
        tel: telephone,
        email: email,
        web: web
    });
      link = '';     }
  }