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. <meta name="copyright" content="Lopan.jp">
  8. <link rel="shortcut icon" href="http://lopan.jp/favicon.ico">
  9. <link rel="canonical" href="http://lopan.jp/google-maps-api/">
  10. <link rel="stylesheet" href="css/style.css">
  11. <script src="http://maps.googleapis.com/maps/api/js"></script>
  12. <script src="js/sample-10.js"></script>
  13. </head>
  14. <body onload="initialize();">
  15. <div id="map_canvas"></div>
  16. </body>
  17. </html>
  1. /*
  2. * style.css
  3. */
  4. body { margin: 0; line-height: 1.6; font-family: arial,sans-serif; }
  5. html, body, #map_canvas { width: 100%; height: 100%; }
  1. /*
  2. * sample-10.js
  3. * コントロールの表示/非表示を切り替える
  4. */
  5. function initialize() {
  6. var latlng = new google.maps.LatLng(35.681382, 139.766084);
  7. var myOptions = {
  8. zoom: 10,
  9. center: latlng,
  10. mapTypeId: google.maps.MapTypeId.ROADMAP,
  11. disableDefaultUI: true,
  12. zoomControl: true,
  13. scaleControl: true
  14. };
  15. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  16. }
  17. google.maps.event.addDomListener(window, 'load', initialize);