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>ジオコーディングでGoogle マップ</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 geocoder = new google.maps.Geocoder();
  15. geocoder.geocode({
  16. 'address': '東京駅'
  17. }, function(result, status) {
  18. if (status == google.maps.GeocoderStatus.OK) {
  19. var latlng = result[0].geometry.location;
  20. var myOptions = {
  21. zoom: 10,
  22. center: latlng,
  23. mapTypeId: google.maps.MapTypeId.ROADMAP
  24. };
  25. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  26. } else {
  27. alert('取得できませんでした…');
  28. }
  29. });
  30. }
  31. google.maps.event.addDomListener(window, 'load', initialize);
  32. </script>
  33. </head>
  34. <body>
  35. <div id="map_canvas"></div>
  36. </body>
  37. </html>