谷歌地圖 - 反向地理編碼

Question

我不知道多少JavaScript和我不太熟悉谷歌地圖，所以我在這裏掙扎一點，但我有一個地圖實現了一個圓周繪製圓。我也有一個滑塊，可以讓你增加圓的半徑。

當有人移動標記時，我的圓圈隨之移動，並且表單中相應的隱藏輸入更新，以便我可以獲取latLng並保存到daabase。

但是我也想在用戶移動標記時得到一個人類可讀的地址，所以我將地理代碼反向。這是我遇到問題的地方，這是反向地理編碼好，但現在我不能再移動標記。我知道這可能是簡單的事情，但我甚至不知道我有多少，只要我不知道什麼是錯的。誰能幫我嗎？

我的地圖是在http://www.liquidlizard.net/users/trainer

，這裏是我使用的代碼的轉儲：

http://pastebin.com/T6Sa92Af

編輯 - 和代碼的要求

<?php 
echo $this->Html->script('https://maps.googleapis.com/maps/api/js?sensor=false', array('inline' => false)); 
?> 

<div class="alignCenter bottomBorder marginBot36"> 
    <div class="widthContainer padBot18 padTopt18"> 
     <?php echo $this->Html->image('icon-round-marker-pink.png', array('class'=>'midAlignImg'));?> 
    </div> 
    <div class="widthContainer fontTwentySeven padBot18"> 
     Which locations do you cover? 
    </div> 
    <div class="singleColForm alignLeft fontFourteen" style="border:none"> 
     <div class="left"><?php echo $this->Html->image('mileradius.png');?></div> 
     <div class="right" id="sliderHolder"> 
      <div id="slider"></div> 
     </div> 
     <div style="clear:both;height:18px"></div> 
     <div id="map-canvas"></div> 
     <div id="map-numOf-miles" class="alignCenter fontPurple fontNineteen">0 Miles</div> 
    </div> 
    <div class="addButton strong">ADD</div> 
</div> 
<?php // hidden inputs for locations 
echo $this->Form->hidden('miles', array('id'=>'miles')); 
echo $this->Form->hidden('location', array('id'=>'location')); 
?> 




<script type="text/javascript"> 
$(document).ready(function() { 


    //User clicks to add location 
    $(".addButton").click(function() { 
     $.post("<?php echo $this->webroot;?>locations/add", { name: "John", time: "2pm" }) 
       .done(function(data) { 
       alert("Data Loaded: " + data); 
      }); 
    }); 

    //Google Maps 
     var userLocation = "London"; 
     var geocoder = new google.maps.Geocoder(); 
     var circle; 
     var latLng; 
     var marker; 

     $("#slider").slider({ 
      slide: function(event, ui) { 
       $("#map-numOf-miles").html(ui.value+' Miles'); 
       $("#miles").val(ui.value); 
       circle.setRadius(ui.value/0.0621371192*100); 
      } 
     }); 

      //Google Maps 
      function initialize() { 
       var styles = [ 
        { 
         stylers: [ 
          { hue: "#00ffe6" }, 
          { saturation: -20 } 
         ] 
        } 
       ]; 

       geocoder.geocode({"address": userLocation}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
          latLng = results[0].geometry.location; 
          //alert (latLng); 
          var mapOptions = { 
           center: latLng, 
           zoom: 6, 
           styles: styles, 
           mapTypeId: google.maps.MapTypeId.ROADMAP 
          }; 

          map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

          marker = new google.maps.Marker({ 
           map: map, 
           position: latLng, 
           draggable: true 
          }); 

          circle = new google.maps.Circle({ 
           map: map, 
           radius: 0, //your radius in meters 
           strokeColor: '#d12d87', 
           strokeOpacity: 0.35, 
           strokeWeight: 2, 
           fillColor: '#d12d87', 
           fillOpacity: 0.35, 
           center: latLng 
          }); 


         $("#location").val(results[0].geometry.location); 
         google.maps.event.addListener(marker, "dragend", function(){ 
           var position = marker.getPosition(); 
           map.setCenter(position); 
           //update the hidden form with the new location 
           $("#location").val(position.lat() + " ," + position.lng()); 
           //reverse geocode the latlng to get human readable address 
           var latlng = new google.maps.LatLng(position.lat(), position.lng()); 
            geocoder.geocode({'latLng': latlng}, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) { 
             if (results[1]) { 
              alert(results[1].formatted_address); 
             map.setZoom(11); 
             marker = new google.maps.Marker({ 
              position: latlng, 
              map: map 
             }); 
             infowindow.setContent(results[1].formatted_address); 
             infowindow.open(map, marker); 
             } else { 
             alert('No results found'); 
             } 
            } else { 
             alert('Geocoder failed due to: ' + status); 
            } 
            }); 

         }); 
         google.maps.event.addListener(marker, "drag", function(){ 
           circle.setCenter(marker.getPosition()); 
         }); 
        } else { 
         alert("Geocode failed. Please edit your address (top of the page) and try again."); 
        } 
      }); 
     } 
     google.maps.event.addDomListener(window, "load", initialize); 


}); 
</script> 

Answer 1

你有這裏有個小問題：

infowindow.setContent(results[1].formatted_address); 

infowindow未定義，因此未來的JavaScript將失敗。

Answer 2

Emil是正確的，infowindow沒有被定義，因此進一步的執行被終止。

你需要後

var geocoder = new google.maps.Geocoder();