1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  6. <title>アイコンを置く</title>
  7. <style>
  8. body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
  9. html, body, #map_canvas { width: 100%; height: 100%; }
  10. </style>
  11. <script src="http://maps.googleapis.com/maps/api/js"></script>
  12. <script>
  13. function initialize() {
  14. var latlng = new google.maps.LatLng(35.681382, 139.766084);
  15. var myOptions = {
  16. zoom: 10,
  17. center: latlng,
  18. mapTypeId: google.maps.MapTypeId.ROADMAP
  19. };
  20. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  21. var image = 'img/ico_lopan.png';
  22. var lopanMarker = new google.maps.Marker({
  23. position: latlng,
  24. map: map,
  25. icon: image
  26. });
  27. }
  28. </script>
  29. </head>
  30. <body onload="initialize();">
  31. <div id="map_canvas"></div>
  32. </body>
  33. </html>