Google Mapsの地図にマーカーをプロットする

komori 132views 更新:2016年3月3日

Google Mapsの地図にマーカーをプロットするサンプルコードです。 HTMLファイルとして保存してブラウザで開くと、マーカーがプロットされた地図が表示されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Google Mapsの表示サンプル</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
  <script type="text/javascript">
    var map;

    function initialize_map() {
      var map_center = new google.maps.LatLng(35.6745973, 139.7778069);
      var map_options = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: map_center,
        zoom: 14,
      };
      map = new google.maps.Map(document.getElementById("map"), map_options);

      create_marker(35.6745973, 139.7778069);
    }

    function create_marker(lat, lng){
      var marker_options = {
        map: map,
        position: new google.maps.LatLng(lat, lng),
        zIndex: 0
      };

      var marker = new google.maps.Marker(marker_options);
    }

    google.maps.event.addDomListener(window, "load", initialize_map);
  </script>
</head>
<body>
  <div id="map" style="width:100%; height:500px;"></div>
</body>
</html>

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

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

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