Googleマップ API•テック

Map Iconsの導入方法

2021年4月18日 by single コメントはまだありません

Map Iconsってご存知でしょうか？Google Maps上にちょっと素敵なFont Awesomeのようなウェブアイコン風のアイコンを設定できるプロジェクトです。

個人的にはこのデザインが好きなので利用したりもしています。今回はそのMap Iconsの導入方法を紹介します。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Map Iconsの導入方法

プロジェクトのダウンロード

まずMap Iconsのサイトに行き、「Download」ボタンを押して、プロジェクトをダウンロードしてください。

ダウンロードして、ZIPファイルを解凍すると、以下のようなファイルが出てきますので、「dist」内をすべてコピーしましょう。

解凍後の書庫ファイル

プロジェクトファイルの展開

「dist」ディレクトリ内のすべてのファイルをコピーします。

「dist」ディレクトリをコピー

今回はこのファイルを「（ウェブルート）/assets/mapicons/」にコピーすることにします。

Map Iconsを正しく生成できない

2021年4月17日現在、ダウンロードした書庫ファイルに保存されている「map-icons.js」と「map-icons.min.js」について、正しく動作しません。かなり前から、こういう状態でした。

ですが、「Map Icons」のサイトには正しく動作しているサンプルが表示されているため、気になり、ロードしているJsファイルを調べてみました。そうすると、ダウンロードされるファイルとその内容が違いました。試しにこのファイルを利用すると、動作したので、もし、うまく、Map Iconsを生成できなかった場合には、このMap Iconsのサイトでサンプルで利用されているJsファイルを利用してみてはどうでしょうか。

サンプル

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Simple Map</title>
   <script
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:100%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <!-- Map Icons -->
   <link rel="stylesheet" type="text/css" href="/assets/mapicons/css/map-icons.css">
   <script type="text/javascript" src="/assets/mapicons/js/map-icons.js"></script>
   <script type="text/javascript">
      var map;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68717753821457, 139.75708304187083);
         var mapOptions = {
           zoom: 16,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         var marker1 = new Marker({
            map: map,
            position: new google.maps.LatLng(35.68517826190777, 139.7528236934712),
            icon: {
               path: SQUARE_PIN,
               fillColor: '#00CCBB',
               fillOpacity: 1,
               strokeColor: '',
               strokeWeight: 0
            },
            map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'
         });
         var marker2 = new Marker({
            map: map,
            position: new google.maps.LatLng(35.68892969290476, 139.75403068796584),
            icon: {
               path: ROUTE,
               fillColor: '#1998F7',
               fillOpacity: 1,
               strokeColor: '',
               strokeWeight: 0
            },
            map_icon_label: '<span class="map-icon map-icon-transit-station"></span>'
         });
         
         var marker3 = new Marker({
            map: map,
            position: new google.maps.LatLng(35.687282744910064, 139.75399313707237),
            icon: {
               path: MAP_PIN,
               fillColor: '#6331AE',
               fillOpacity: 1,
               strokeColor: '',
               strokeWeight: 0
            },
            map_icon_label: '<span class="map-icon map-icon-city-hall"></span>'
         });
         
         var marker4 = new Marker({
            map: map,
            position: new google.maps.LatLng(35.684193536523836, 139.75665388828276),
            icon: {
               path: SQUARE_ROUNDED,
               fillColor: '#6331AE',
               fillOpacity: 1,
               strokeColor: '',
               strokeWeight: 0
            },
            map_icon_label: '<span class="map-icon map-icon-courthouse"></span>'
         });
         
         var marker5 = new Marker({
            map: map,
            position: new google.maps.LatLng(35.68602790458027, 139.76022659073206),
            icon: {
               path: SQUARE,
               fillColor: '#00CCBB',
               fillOpacity: 1,
               strokeColor: '',
               strokeWeight: 0
            },
            map_icon_label: '<span class="map-icon map-icon-grocery-or-supermarket"></span>'
         });
         
         var marker6 = new Marker({
            map: map,
            position: new google.maps.LatLng(35.689679086532585, 139.75781796720835),
            icon: {
               path: SHIELD,
               fillColor: '#6331AE',
               fillOpacity: 1,
               strokeColor: '',
               strokeWeight: 0
            },
            map_icon_label: '<span class="map-icon map-icon-police"></span>'
         });
      }
      google.maps.event.addDomListener(window, 'load', initMap);
   </script>
</head>
<body>
   <div id="map_canvas"></div>
</body>
</html>

デモ

Map IconsのをGoogle Maps（グーグルマップ）に展開する

CSSとJSファイルを読み込む

   <!-- Map Icons -->
   <link rel="stylesheet" type="text/css" href="/assets/mapicons/css/map-icons.css">
   <script type="text/javascript" src="/assets/mapicons/js/map-icons.js"></script>

まず、CSSファイルとJSファイル読み込むようにします。

Load時に地図生成関数を呼び出し

次にLoad時に地図生成処理及びマーカーアイコンを生成するよ処理を呼び出します。

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

または、

<body onload="initMap();">

みたいにしてください。

多分、Google Maps APIのロード順などの問題もあるのでしょうが、以下のような方法の場合、うまく、Map Iconsを生成できませんでした。

   <script defer
     src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >	<!-- NGだった呼び出し方法 -->
   </script>

Map Iconマーカー生成

         var marker1 = new Marker({
            map: map,
            position: new google.maps.LatLng(35.68517826190777, 139.7528236934712),
            icon: {
               path: SQUARE_PIN,
               fillColor: '#00CCBB',
               fillOpacity: 1,
               strokeColor: '',
               strokeWeight: 0
            },
            map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'
         });

Map Iconsは google.maps.Marker を拡張したクラスなので、多くは、google.maps.Markerと一致しますが、２点だけ、Map Iconsのマーカーのプロパティになります。

icon:path

iconのpathでは、マーカーの形のプロパティなります。６つのタイプを選べます。

MAP_PIN
SQUARE_PIN
SHIELD
ROUTE
SQUARE
SQUARE_ROUNDED

map_icon_label

次に指定するのが、マーカー内に設定するアイコンになります。ウェブアイコン風のアイコンを指定することができます。

map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'

map_icon_labelには、<span>タグでclassに「map-icon」に加えて、設定したいアイコンのクラスを設定します。

「 Over 175 Icons and Counting」とあるので、175を超えるアイコンを設定することができます。

サイトの「map Icons」を参照し、利用したいアイコンを検索し、map_icon_labelに指定すれば、アイコンを設定できます。

Map Iconsの問題点

Map IconsはたくさんあるGoogle Maps（グーグルマップ）で利用できるアイコンの中で、一番クールだと思っています。

ですが、しばらく更新されていません。事実、ダウンロードボタンでダウンロードされるJsファイルがうまく動作しないという問題を抱えています。多分、個人的な環境問題ではないと思います。

次いつ更新されるかわからないのですが、更新されないとなると、いつか、Google Maps（グーグルマップ）の大幅な変更があれば、導入できなくなってしまうかもしれませんね。

ご参考

関連ページ