目次

,

ここは旧トップページ＞日曜プログラミング

GoogleMaps APIv3 地図の中央に十字アイコン表示

地図の中心位置がわかるように十字アイコンを表示します。

APIを使う方法をHTML+CSSを使う方法の2種類あります。

APIを使う方法

地図の移動に合わせてカスタムマーカーを移動させる方法を使っています。APIで動作しているので正確に中央を表示しますが移動時に十字アイコンが遅れて追従します。

サンプルデモ

地図の移動に合わせて中央の十字アイコンが動きます。

ソースコード

<style>
#mapdiv {width:400px;height:300px;}
</style>
<div id="mapdiv"></div>
<script>
  var map;
  function initMap1() {
    map = new google.maps.Map(document.getElementById('mapdiv'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 8
    });
 
    //ターゲットスコープをセット
    var tgt_marker = new google.maps.Marker({
      position: {lat: 0, lng: 0},
      map: map,
      icon: {
        url: 'http://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
        size: new google.maps.Size(32, 32),
        origin: new google.maps.Point(0, 0),
        scaledSize: new google.maps.Size(32, 32),
        anchor: new google.maps.Point(16, 16)      
      },
      clickable: false, /* クリック不可 */
      zIndex: 0
    });
    //ターゲットスコープ表示
    tgt_marker.setMap(map);
 
    //地図の表示内容が変更されたら、センター座標取得しマーカー座標変更
    google.maps.event.addListener( map ,'bounds_changed',function(){
      var pos = map.getCenter();
      tgt_marker.setPosition(pos);
    });  
  }
 
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap1" async defer></script>

備考

1.十字アイコンの画像を表示する部分です。 

    //ターゲットスコープをセット
    var tgt_marker = new google.maps.Marker({
      position: {lat: 0, lng: 0},
      map: map,
      icon: {
        url: 'ターゲットスコープの画像ファイル名',
        origin: new google.maps.Point(0, 0), //(アイコンセットから切り出す時に使用、今回は0,0)
        size: new google.maps.Size(32, 32),  //画像ファイルの大きさ
        scaledSize: new google.maps.Size(32, 32), //(画像を拡縮表示する時に使用、原寸ならsizeと同じか省略)
        anchor: new google.maps.Point(16, 16) //中央位置の画像(scaledSizeを基準)
      },
      clickable: false, /* クリック不可 */
      zIndex: 0
    });
    //ターゲットスコープ表示
    tgt_marker.setMap(map1);

2.十字アイコンを地図に合わせて移動させる2つの設定です。マップの変更を検知すると中央座標を取得してターゲットスコープの座標を更新します。

移動中は「bounds_changed」イベントが繰り返し何度も処理されるため高負荷(クライアント側のみ)となります。低スペックPC向けのWebサイトの場合は「idle」イベントに変更すると操作後の低負荷時にイベントが発生するので負荷が減ります。 

    //地図の表示内容が変更されたら、センター座標取得しマーカー座標変更
    google.maps.event.addListener( map ,'bounds_changed',function(){
      var pos = map.getCenter();
      tgt_marker.setPosition(pos);
    });

HTML+CSSを使う方法

HTMLとCSSを使いマップの上に画像を重ねているだけです。重ねて表示する方法はいくつかありますがこの例ではposition:relative;とposition:absolute;によって重ねています。APIと連動していないため地図の中心から微妙なズレが発生する可能性があります。またIE10以下など古いブラウザでは画像へのマウスイベント下側のマップに透過させる pointer-events プロパティが使えないのマップが操作できない不具合が出ます。

サンプルデモ

地図の移動に合わせて中央の十字アイコンが動きます。

ソースコード

<style>
#mapdiv{width:400px;height:300px;}
/* 重ねるための親div */
#tgt_wrap{
  position:relative;
}
/* 重ねるアイコンのdiv */
#tgt{
  position:absolute;
  width:400px;height:300px; /*マップと同じサイズにする*/
  top:0;left:0;
  background-image: url(http://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif);
  background-position: center; 
  background-repeat: no-repeat;
  pointer-events:none;
}
</style>
<div id="tgt_wrap">
  <div id="mapdiv"></div>
  <div id="tgt"></div>
</div>
<script>
  var map;
  function initMap1() {
    map = new google.maps.Map(document.getElementById('mapdiv'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 8
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap1" async defer></script>

備考

1.マップを表示するdiv(id=mapdiv)の直後にスコープを表示するdiv(id=tgt)を設置し、その2つをdiv(id=tgt_wrap)で囲みます。 

<div id="tgt_wrap">
  <div id="mapdiv"></div>
  <div id="tgt"></div>
</div>

2.CSSで、マップと同じ大きさのdivの中心にスコープを表示しマップの上に重ねて表示します。重ねるだけだとクリック操作が上側にあるスコープのdivが受け取ってしまいマップが動かないのでpointer-events:noneでイベントを受け取らないようにしています。 

#tgt_wrap{
  position:relative;
}
#tgt{
  position:absolute;
  width:400px;height:300px; /*地図のサイズと同じにする*/
  top:0;left:0;
  background-image: url(【アイコン画像】);
  background-position: center; /*背景を中心に表示*/
  background-repeat: no-repeat; /*背景は1回表示で敷き詰めない*/
  pointer-events:none; /*マウスイベントを透過させる(IE10以前は未対応)*/
}

ここは旧トップページ＞日曜プログラミング