Skip to content

Instantly share code, notes, and snippets.

@canujohann
Last active August 29, 2015 14:02
Show Gist options
  • Save canujohann/1d281a0c6a0aedbf323f to your computer and use it in GitHub Desktop.
Save canujohann/1d281a0c6a0aedbf323f to your computer and use it in GitHub Desktop.
google map explain

hampom.wordpress.com のソースコードです。コメントを追加させていただきました。

//jqueryのreadyメッソード
//HTMLが読み込まれたあとに実行されるメッソード(ready)
$(document).ready(function() {

  //住所の項目を取得
  var mapdiv = document.getElementById('map_canvas');
  
  //google mapの必要なライブラリー:geocoder
  var geocoder = new google.maps.Geocoder();
  
  //jqueryでの座標項目を取得(lat + long)
  var org_lat = $('#lat').val();
  var org_lng = $('#lng').val();
 
 //mapの中心(35.6585873,139.7454247)
  var point = new google.maps.LatLng(org_lat, org_lng);
  
  //マップインスタンスのoptions
  var myOptions = {
      zoom: 16,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scaleControl: true
  };
 
 //マップの初期化
  var map = new google.maps.Map(mapdiv, myOptions);
  
  //マーカーを追加
  //座標はマップの中心と同じ
  var marker = new google.maps.Marker({
      position: point,
      map: map,
      draggable: true
  });
 
  //上記に追加したマーカーのイベント追加(drag/drop)
  //動かせると、座標項目を更新
  google.maps.event.addListener(marker, 'dragend', function() {
      var p = marker.position;
      $('#lat').val(p.lat());
      $('#lng').val(p.lng());
  });
 
  //【住所】項目がクリックされると・・・
  $('#getad').click(function() {
 
    //入力された住所を取得
    var sad = $('#address').val();
    
    //geocoderを初期化
    //実はこの一行が重複してて、要らないですw
    var geocoder = new google.maps.Geocoder();
 
    //geocodeメッソードを呼んで、情報を取得
    //パラメータとしては ⇒ 入力された住所 (sad)
    //二つ目のパラメータはcallback
    geocoder.geocode({ 'address': sad}, function(results, status) {
      
      /*callbackの中で二つのパラメータが入ってます:
        1:結果(json情報)
        2:ステータス(情報を取得できたかどうか)
      */
      
      //問題がなければ・・
      if (status == google.maps.GeocoderStatus.OK) {
 
        //マップの中心を更新
        map.setCenter(results[0].geometry.location);
        
        //マーカーの中心を更新
        marker.setPosition(results[0].geometry.location);

        //lat + long項目を更新
        var p = marker.position;
        $('#lat').val(p.lat());
        $('#lng').val(p.lng());
      } else {
        alert('住所から場所を特定できませんでした。最初にビル名などを省略し、番地までの検索などでお試しください。');
      }
    });
 
    return false;
 
  });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment