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>