Googleマップにアイコンを埋め込んで表示する

goto_jp 1,005views 更新:2014年2月13日

http://aimluck.com/company/access.html
弊社サイトでもやっている方法です。

まずHTML側はこちら。

<script src="map.js"></script>
<body onload="googlemap()">
<div id="map_canvas" style="width:500px;height:400px;"></div>
</body>

「map_canvas」が地図が納まる箱になります。
上記HTMLで読み込んでいる「map.js」はこちら。

function googlemap() {
  //地図本体の設定
  var latlng = new google.maps.LatLng(35.674651,139.77771);
  var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

重要なのは3行目で、ここに緯度経度の数値を入れます。
Googleマップ上の任意の箇所で右クリックし、「この場所について」をクリックすると検索バーに緯度経度の数値が表示されます。

これだけで地図は表示されますが、アイコンを加えるコードを足したものはこちら。

function googlemap() {
  //地図本体の設定
  var latlng = new google.maps.LatLng(35.674075,139.776107);
  var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

  //アイコンの設定
  var icon = new google.maps.MarkerImage('mapicon.png',
      new google.maps.Size(38,46),
      new google.maps.Point(0,0)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: 'アイコンタイトル'
  };
  var marker = new google.maps.Marker(markerOptions);
}

12行目はアイコン用の画像ファイルパス。
13行目はアイコン画像のサイズ。
14行目は中心座標からアイコンの位置を調整したい場合に記入。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません