Google Maps APIを使って地図をカスタマイズする

GoogleMapsAPIを使って地図をカスタマイズします。
関数化させちゃったけど今考えてみればいらなかったな・・・

▼埋め込みGoogle Mapのスクロール防止対策はこっち
埋め込みGoogle Mapをスクロールさせないようにする

・スクロールしてもズームされない
・デフォルトのUIを非表示
・色を変更
・マップピンをアイコンに変更

↑こんな感じのmapになります。
 
 

HTML

<body onload="mapLoad();">
    <div class="map">
      <div class="map_inner " id="map_custmomize">
          <!-- ここにGoogleMapsが読み込まれる -->
      </div>
  </div>
</body>

<script src="https://maps.googleapis.com/maps/api/js?key=APIキーを入れる"></script>
<!-- googlemap -->
<script src="js/gmaps.js"></script>

CSS

    .map{
        width: 100%;
        height: 340px;
    }
    .map_inner{
        width: 100%;
        height: 100%;
    }

gmaps.js

function mapLoad() {
    /*----------基本的なカスタマイズ----------*/
  var latlng = new google.maps.LatLng(139.744858, 139.744858);/*経度、緯度(今回は国会議事堂)*/
  var myOptions = {
    zoom: 15, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] },/*表示タイプの指定*/
    disableDefaultUI: true, /*デフォルトのUIを無効*/
    scrollwheel: false /*スクロールでズームされるのを無効*/
  };
  var map = new google.maps.Map(document.getElementById('map_custmomize'), myOptions);/*map_custmomizeというIDのところに表示*/

  /*----------スタイルのカスタマイズ----------*/
  var styleOptions =
  [
    {
      featureType: "all",/*どんなものにスタイルを設定するか(ここではすべてのもの)*/
      elementType: "all",/*どんなものにスタイルを設定するか(ここではすべてのもの)*/
      stylers: [
        { hue: "#e0dcd1" },/*色*/
        { lightness: -5 },/*明度*/
        { saturation: -90 }/*彩度*/
      ]
    }
  ];
 var styledMapOptions = { name: '株式会社○○' }
  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('sample', sampleType);
  map.setMapTypeId('sample');

/*----------アイコンの取得----------*/
    var icon = new google.maps.MarkerImage('img/index/○○.png',/*アイコンの場所*/
    new google.maps.Size(50,50),/*アイコンのサイズ*/
    new google.maps.Point(0,0)/*アイコンの位置*/
);

/*----------マーカーの設置----------*/
var markerOptions = {
  position: latlng,/*表示場所と同じ位置に設置*/
  map: map,
  icon: icon,
  title: '株式会社○○'/*マーカーのtitle*/
};
var marker = new google.maps.Marker(markerOptions);

}

注意

HTMLに<body onload=”mapLoad();”>と入れてありますが、関数にしてあるのでこれを入れないと動きません。

▼埋め込みGoogle Mapのスクロール防止対策はこっち
埋め込みGoogle Mapをスクロールさせないようにする

参照サイト

GoogleMapの埋め込みと、デザインやアイコンの変更などをカスタマイズする方法 | 株式会社LIG

  • コーダーのための計算機