平成30/ 2018-12-19 23:49
Google Maps API を使って住所をもとに地図表示
http://webcache.googleusercontent.com/search?q=cache:iix0-9U4tV8J:d.hatena.ne.jp/tageo/20110205/1296909642+google.maps.latlng+%E4%BD%8F%E6%89%80&cd=17&hl=ja&ct=clnk&gl=jp&source=www.google.co.jp
住所情報から地図を表示させたい。
とりあえず表示できたので、それを書く。
参考URL
http://sites.google.com/site/gmapsapi3/Home/services
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
と読み込み
<script type="text/javascript">
var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(35.658517, 139.745493);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    codeAddress();
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
  
</script>
と記述。


<div id="map_canvas" style="width: 700px; height: 500px;"></div>
<div>
   <input id="address" type="hidden" value="住所データ">
</div>
『住所データ』に表示させたいデータを入れて、表示。