WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

GoogleMapのカスタマイズ

GoogleMapは通常インラインフレームで表示させている場合が多いですが、カスタマイズをするには
DOMで表示させる必要があります。

var map;
  function initMap() {

    // マップ基本設定
    var latLng = new google.maps.LatLng(35.725968, 139.713874);
    map = new google.maps.Map(
      document.getElementById("map-inner"),
      {
        zoom: 16,  // 拡大率
        center: latLng,
        scrollwheel: false  // マウスホイールで拡縮しなくなる
      }
    );

    // マーカーの設定
    var markerImg = {
      url:'img/maplogo.svg',
       scaledSize : new google.maps.Size(60,72)
    };
   var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: markerImg
    });

// 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
    var mapType = new google.maps.StyledMapType(mapStyle);
    map.mapTypes.set('GrayScaleMap', mapType);
    map.setMapTypeId('GrayScaleMap');
  }


それとGoogleMap用のapiを呼び出すCDNをリンクします

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>