お問合せ先 無料見積もり

APRICOT DESIGN BLOG

GoogleMapのデザイン

UPDATE : 2017.11.04

アプリコットデザインのブログ

WEB制作では欠かせないMAPの挿入!
最近ではデザイン性の高いMAPを要求されることが増えてきましたので、
本日はGoogleMapのカラー指定をコピペできるようにご紹介します!


function initialize() {
  var myLatLng = new google.maps.LatLng(マップの中心座標);
  var myOptions = {
  zoom: 17, //ズームレベル
  center: myLatLng,
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style']
  }
  };
  map = new google.maps.Map(document.getElementById("maparea"), myOptions);
  new google.maps.Marker({
  position: new google.maps.LatLng(マップの中心座標),
  map: map,
  icon: {
		url: "アイコンのURL",
		scaledSize: new google.maps.Size(80, 60),
	},
  });

  var mapstyle =
//start
[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#d5d0b7"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": ""
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel", //土地区画
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d5d0b7"
      }
    ]
  },
  {
    "featureType": "poi", //誰かが興味をもった場所
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#d5d0b7"
      }
    ]
  },
  {
    "featureType": "poi", //誰かが興味をもった場所
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park", //公園
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park", //公園
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road", //道路
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f8efd2"
      }
    ]
  },
  {
    "featureType": "road.arterial", //幹線道路
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway", //高速道路
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway", //高速道路
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local", //地方道路
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line", //交通機関の路線
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station", //駅
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water", //海、湖、池や川など見ずのあるところ
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water", //海、湖、池や川など見ずのあるところ
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]
//end
;

  var mapType = new google.maps.StyledMapType(mapstyle, myOptions);
  map.mapTypes.set('style', mapType);
  map.setMapTypeId('style');

  google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
  });
  }


function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initialize";
document.body.appendChild(script);
}

google.maps.event.addDomListener(window, 'load', initialize);

上記のコードで下のMAPが出来上がり!

参考サイト:スタイル付き地図

    営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

    [長野オフィス-本社-]
    〒381-2246
    長野県長野市丹波島1-805

    [東京ブランチ]
    〒100-0004
    東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

    [松本ブランチ]
    〒390-0851
    長野県松本市大字島内4619-3 QuintetDoor 1階南室

    [金沢ベース]
    〒920-0831
    石川県金沢市東山1丁目10-1 103

    記事が気に入ったら「いいね」してね。(SNSとは連動してません)

    0

    無料見積

    まずは無料でお見積もりを作成いたします。
    お気軽にお問い合わせください。

    無料見積もり

    お問合せ先

    クリックで
    事務所一覧が
    開きます

    tel.0120-622835

    営業時間/9:00〜18:00 
    定休日/土日祝日

    Copyright © 2021 APRICOT DESIGN All Rights Reserved.