Web上にマップを表示する

htmlファイルに以下のソースコードを追記することで、マップを画面に表示することができます。

<div id="map_canvas" style="width:100%; height:500px;"></div>

今回マップとしてGoogleマップを使用しています。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
  <script type="text/javascript">
    var map_canvas;

    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_canvas = new google.maps.Map(document.getElementById("map_canvas"), map_options);

      create_marker(35.6745973, 139.7778069);
    }

    function create_marker(lat, lng){
      var marker_options = {
        map: map_canvas,
        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>