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-2.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-2.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. streetViewControl: false,
  12. mapTypeControlOptions: {
  13. position: google.maps.ControlPosition.LEFT_TOP
  14. },
  15. zoomControlOptions: {
  16. position: google.maps.ControlPosition.RIGHT_TOP
  17. }
  18. };
  19. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  20. }
  21. google.maps.event.addDomListener(window, 'load', initialize);