Google Map API でアイコンと影を描画順を指定して地図に表示する - Google Map

Google MAP JavaScript API v3 を用いて描画順を指定して地図上にアイコンとアイコンの影をオーバーレイ表示します。

アイコン画像の作成

こちらの記事で使ったアイコン画像をそのまま使います。

アイコン影画像の作成

アイコンの影画像を作成します。画像の透過度(アルファチャネル)を指定できるPNG画像で作成します。Photoshopで作成時の画面は下図の通りです。

コード(map.html)

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
  function initialize() { 
    var mapstyle = [
    {
　    featureType:"all",
　    elementType:"all",
　    stylers: [
        {visibility: "on" }
      ]
    }
    ];

    var latlng = new google.maps.LatLng(35.682143,139.769165); 
    var myOptions = { 
      zoom: 17, 
      center: latlng, 
　    mapTypeIds: [
        'mainmap',  
        google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.SATELLITE,
        google.maps.MapTypeId.TERRAIN
      ]
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
    
    var styleMapOptions = {
　    map: map,
　    name:"地図"
    }
    var myMapType = new google.maps.StyledMapType(mapstyle, styleMapOptions);
    map.mapTypes.set('mainmap', myMapType);
    map.setMapTypeId('mainmap');

    setMarkers(map, hotels); 
  } 

  var hotels = [
    ['シャングリラホテル東京', 35.682529,139.7693, 1],
    ['ホテルメトロポリタン丸の内', 35.683749,139.768496, 2],
    ['フォーシーズンズホテル丸の内', 35.67805,139.766876, 3]
  ]; 

  function setMarkers(map, locations) {
    var image = new google.maps.MarkerImage('star.png',
      new google.maps.Size(24, 24),
      new google.maps.Point(0,0),
      new google.maps.Point(12, 12)); 
      
    var shadow = new google.maps.MarkerImage('star_shadow.png',
      new google.maps.Size(24, 24),
      new google.maps.Point(0,0),
      new google.maps.Point(12, 12));

    var shape = {
      coord: [11,1,8,8,1,9,7,14,5,22,11,17,18,22,16,14,22,9,14,8],
      type: 'poly' 
    };

    for (var i = 0; i < locations.length; i++) {
      var hotel = locations[i];
      var myLatLng = new google.maps.LatLng(hotel[1], hotel[2]);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: hotel[0],
        zIndex: hotel[3]
      });
    } 
  }
 
</script> 
</head> 
<body onload="initialize()"> 
  <div style="width:780px">
  <div style="float:left;width:256px;">
    Googleマップをページ内に表示<br/>
    マップの操作もできますよ<br/>
  </div>
  <div id="map_canvas" style="float:left;width:512px; height:512px;"></div> 
  <div style="clear:left;"></div>
  </div>
</body> 
</html>

解説

地図は商業施設も表示する設定にしてあります。詳しくはこちらの記事を参照してください。

マーカーを表示する座標とタイトルの情報を設定しています。配列の配列として定義しています。

 var hotels = [
   ['シャングリラホテル東京', 35.682529,139.7693, 1],
   ['ホテルメトロポリタン丸の内', 35.683749,139.768496, 2],
   ['フォーシーズンズホテル丸の内', 35.67805,139.766876, 3]
 ];

下記のコード部分がアイコンを表示するJavaScriptの関数になります。

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('star.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0,0),
    new google.maps.Point(12, 12)); 
      
  var shadow = new google.maps.MarkerImage('star_shadow.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0,0),
    new google.maps.Point(12, 12));

  var shape = {
    coord: [11,1,8,8,1,9,7,14,5,22,11,17,18,22,16,14,22,9,14,8],
    type: 'poly' 
  };

  for (var i = 0; i < locations.length; i++) {
    var hotel = locations[i];
    var myLatLng = new google.maps.LatLng(hotel[1], hotel[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: hotel[0],
      zIndex: hotel[3]
    });
  }  
}

マーカーのインスタンスMarkerImageクラスのインスタンスを作成します。
コンストラクタの最初の引数にアイコン画像のサイズを、2番目の引数は原点座標を設定します。2つの引数の値を変えることで、与えた画像の一部分をアイコンとして表示できます。
3番目の引数は地図上に表示するときの基準点になります。デフォルトでは（幅/2、高さの座標）になっています。今回のコードでは(幅/2,高さ/2)となっており、指定した緯度経度に星のアイコンの中心が表示されるように設定しました。

  var image = new google.maps.MarkerImage('star.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0,0),
    new google.maps.Point(12, 12));

アイコンのクリック有効範囲(ホットスポット)を設定しています。今回はホットスポットをポリゴンで定義しました。定義方法として以下があります。

  var shape = {
    coord: [11,1,8,8,1,9,7,14,5,22,11,17,18,22,16,14,22,9,14,8],
    type: 'poly' 
  };

circ: circle:	coode: [x1,y1,r]	x1,y2を円の中心する半径rをホットスポットに設定します。
poly: polygon:	coord: [x1,y1,x2,y2...xn,yn]	x1,y1,x2,y2...xn,ynで表されるポリゴン領域をホットスポットに設定します。
rect: rectangle:	coord: [x1,y1,x2,y2]	x1,y1,x2,y2で表される矩形領域をホットスポットに設定します。

この関数(setMarkers)の第二引数に与えられたマーカーデータの配列の数だけ処理を繰り返します。

  for (var i = 0; i < locations.length; i++) {
    ...
  }

forループ内の処理は以下になります。
配列のi番目の要素をhotel変数に代入します。

  var hotel = locations[i];

アイコンを表示する緯度経度を表す、LatLngクラスのインスタンスを作成します。

  var myLatLng = new google.maps.LatLng(hotel[1], hotel[2]);

マーカーのインスタンスを作成します。コンストラクタのオプションのpositionプロパティにアイコンを表示する緯度経度を表すLatLngクラスのインスタンスを指定します。mapにはマーカーを表示する地図のインスタンスを指定します。shadowには影のアイコン画像を、iconには表示するアイコンの画像を、shapeにはホットスポットを表す構造体を指定します。また、titleにはアイコンクリック時に表示されるポップアップに表示するテキストを指定します。zIndexはアイコンの描画順を指定します。zIndexの数値を大きくするほどアイコンは手前に表示されます。何も指定しなかった場合は、低い緯度のマーカー(赤道に近い側、日本ならばより南)が手前に表示されます。

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    shadow: shadow,
    icon: image,
    shape: shape,
    title: hotel[0],
    zIndex: hotel[3]
  });

実行結果

アイコンと影が表示されることが確認できます。

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

目次

Google Map API でアイコンと影を描画順を指定して地図に表示する - Google Map

アイコン画像の作成

アイコン影画像の作成

コード(map.html)

解説

実行結果

関連するページ