google maps - 역 지오 코딩

Question

Google지도가 너무 익숙하지 않아 조금 어려움을 겪고 있습니다. 그러나 여기에 그려진 원으로 구현 된지도가 있습니다. 또한 원의 반지름을 늘릴 수있는 슬라이더가 있습니다.

누군가가 마커를 움직이면 내 원은 그 자리에 따라 움직이며 양식의 적절한 숨겨진 입력이 업데이트되어 latLng을 가져 와서 daabase에 저장할 수 있습니다.

그러나 사용자가 마커를 움직일 때 사람이 읽을 수있는 주소를 원한다. 그래서 지오 코드를 뒤집습니다. 이것은 내가 문제가있는 곳입니다. 역 지오 코딩 OK입니다.하지만 마커를 더 이상 움직일 수 없습니다. 나는 아마 그것이 단순한 무엇인가 알고있다. 그러나 나는 내가 무엇이 틀리게 혼자서 내버려 두었던 지에 관해 알지 않고있다. 누구든지 나를 도울 수 있습니까?

내지도 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가 정의되지 않았으므로 향후 자바 스크립트가 실패합니다.

Answer 2

에밀은 정확하며, 정보창은 정의되어 있지 않으므로 추가 실행이 중단됩니다.

당신은 문제의 코드 (적어도 관련 부분)을 포함하시기 바랍니다

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