ジオコードの住所を情報ウィンドウに表示するにはどうすればよいですか？ Google maps API

Question

私はGoogle Maps API上の場所のアドレスを取得するためにgeolocationを使用しています。経度と緯度を探し、結果を自分のページに返して自分のデータベースで使用します。

マップ内の情報ウィンドウにこれらの結果を表示できませんでした。

以下のコードを使用すると、私のインフォボックスにアドレスが含まれている場合があります。それは現在、長くて次のコードでLATを表示します。

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
infowindow.open(map, marker); 

機能geocodePosition座標のアドレスを検索し、自分のフォームのHTML入力に追加します。

情報ウィンドウを更新するにはどうすればよいですか。私は今や多くの方法を試したが、成功しなかった。何か案は？？あなたがGoogleマップのAPIを使用する場合があります

<script type="text/javascript"> 
var geocoder = new google.maps.Geocoder(); 

function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     updateMarkerAddress(responses[0].formatted_address); 

    } else { 
     updateMarkerAddress('Cannot determine address at this location.'); 
    } 
    }); 
} 

function updateMarkerStatus(str) { 
    document.getElementById('markerStatus').value = str; 
} 

function updateMarkerPosition(latLng) { 
    document.getElementById('info').value = [ 
    latLng.lat(), 
    latLng.lng() 
    ].join(', '); 
} 

function updateMarkerAddress(str) { 
    document.getElementById('address').value = str; 
} 


function initialize() { 

    var latLng = new google.maps.LatLng(-34.397, 150.644); 
    var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
    zoom: 8, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 


    var marker = new google.maps.Marker({ 
    position: latLng, 
    title: 'Property location marker', 
    map: map, 
    draggable: true 
    }); 

     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input); 
     var infowindow = new google.maps.InfoWindow(); 

     autocomplete.bindTo('bounds', map); 

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    var place = autocomplete.getPlace(); 
    if (place.geometry.viewport) { 
    map.fitBounds(place.geometry.viewport); 
    } else { 
    map.setCenter(place.geometry.location); 
    map.setZoom(17); 
    } 
    var image = new google.maps.MarkerImage(
     place.icon, new google.maps.Size(71, 71), 
     new google.maps.Point(0, 0), new google.maps.Point(17, 34), 
     new google.maps.Size(35, 35)); 
    marker.setIcon(image); 
    marker.setPosition(place.geometry.location); 

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker); 

}); 

    // Update current position info. 
    updateMarkerPosition(latLng); 
    geocodePosition(latLng); 

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker); 

    // Add dragging event listeners. 
    google.maps.event.addListener(marker, 'dragstart', function() { 
    updateMarkerAddress('Dragging...'); 
    }); 

    google.maps.event.addListener(marker, 'drag', function() { 
    updateMarkerStatus('Dragging...'); 
    updateMarkerPosition(marker.getPosition()); 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 
    updateMarkerStatus('Drag ended'); 
    geocodePosition(marker.getPosition()); 

     //Show property address in window 
    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker); 
    }); 
} 

// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

marker.getPosition()は、住所を提供する予定ではありません。あなたのgeocodePosition()機能に

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 

し、その関数の2番目の引数としてinfowindowオブジェクトを渡すために：あなたの現在のコードを考えると、あなたの最善の策は、移動することです。

だからあなたinitialize()機能であなたは二番目の引数を含むことにより、geocodePositionへの呼び出しを変更します：

function initialize() { 

... 

    geocodePosition(marker.getPosition(), infowindow); 

} 

次に、あなたのgeocodePosition()機能では、2番目の引数を受け入れるだろう、とresponses[0].formatted_address valueで更新します。私はアドレスとメッセージの値をより簡単に渡すための変数を追加しました。

function geocodePosition(pos, infowindow) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     var address = responses[0].formatted_address;  
     updateMarkerAddress(address); 
     infowindow.setContent('<div><strong>' + address + '</strong><br>'); 

    } else { 
     var msg = 'Cannot determine address at this location.';  
     updateMarkerAddress(msg); 
     infowindow.setContent('<div><strong>' + msg + '</strong><br>'); 
    } 
    }); 
} 

Answer 2

からhttp://code.google.com/apis/maps/documentation/geocoding/#GeocodingRequests

あり、あなたに同じを与える他のAPIがある - しかし、それらのほとんどはお金の費用がかかりますし、Googleであなたは「マイル」の多くを得ます無料で。