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

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行目は中心座標からアイコンの位置を調整したい場合に記入。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様