0

私はこれが初めてですが、ユーザーの W3C ブラウザーのジオコード情報から読み込まれる Google V3 マップがあり、ジオコード オブジェクトから国、州、都市を取得して入力ボックスを更新します。ユーザーが番地を入力したら、Google 経由でジオコーディングし、map.setCenter と setZoom を変更して、更新された地図を表示したいと考えています。それが機能したら、マーカーと情報ウィンドウを追加したいと思います。何時間もの調査と試行にもかかわらず、ジオコードと更新を機能させることができません。Chrome の開発者ツールは、以下の太字で示されている geocoder.geocode 行で実行が停止/失敗したことを示しているようです。関連するコードは次のとおりです。

var map, geocoder, marker, infowindow; //global variables

function initializeMap() {
// Try W3C Geolocation to geolocate desktop user
//initialize Google map, geolocate desktop user, and display after page loads
//find country, state, and city for the user's location  -  this all works
}
window.onload = initializeMap;

//change the Google Map after a user enters a street address
$("#streetAddress").blur(function() {
    //if state, city and street address locations are present
if ( $(this).val().length > 0 && $("#state").val().length > 0 && $("#city3").val().length > 0  ) {
    var gAddress =  [$(this).val() + ", " + $("#city3").val() + ", " + $("#state").val()] ;
    //get coordinates of this address
    //if no geocode object exists, create one
    if (!geocoder) {
    geocoder = new google.maps.Geocoder(); //create Geocoder object else use existing one from initializeMap() ?
    }       
    //create a GeocoderRequest object with user's street address
    var geoCoderRequest = {address:  gAddress} 
    //make a Geocoder request
    geocoder.geocode( geoCoderRequest, function(results, status) {  **//this line fails**
    //check if status is OK
            if ( status === google.maps.GeocoderStatus.OK) {
            //update center of existing map on location returned for this address
            map.setCenter(results[0].geometry.location);
            map.setZoom(14);
            }   
    });         
    } else {
            return; //no action if gAddress is incomplete
        }
});
4

1 に答える 1

1

ドキュメントによると、アドレスは文字列である必要がありますが、gAddress を配列として作成しました。

試す：

var gAddress =  $(this).val() + ", " + $("#city3").val() + ", " + $("#state").val();

更新: マップが最初にロードされた後にズームを実行したい場合 (ユーザー入力への応答など) に応じて、簡単な例を次に示します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    var map;
    var start = 1;

    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0); // London

        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function setZoom() {
        map.setZoom(18);
    }

    function setTimedZoom() {
        map.setZoom(start);

        start = start+1;
        if (start > 18) {
            start = 1;  // lets go round again and again; in reality you'd probably stop zooming at this point.
        }

        setTimeout(setTimedZoom, 3000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <a href="javascript:setZoom()">Zoom In</a>
    <a href="javascript:setTimedZoom()">Timed</a>
    <div id="map_canvas"></div>
</body>
</html>
于 2012-01-18T12:32:06.697 に答える