2

こんにちは、私は Google Maps API を初めて使用します。

住所をジオコーディングしてマーカーをプロットするスクリプトを作成しました。

ユーザーがアドレス フィールドに入力したアドレスを使用して、マーカーの位置に情報ウィンドウを追加したいと思います。

情報ウィンドウが表示されないという問題が発生しました。スクリプト内の間違った場所にある可能性があります。

見ていただけますか。

これが私のスクリプトです、助けてくれてありがとう

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>


 var geocoder;
 var map;


 //set the map center
   function initialize() {
 geocoder = new google.maps.Geocoder();
 var latlng = new google.maps.LatLng(43.6481, -79.4042);
 var mapOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 }

// Creating an InfoWindow          
var infowindow = new google.maps.InfoWindow({});


//on click of the drop the dot button, place a marker
 function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);

    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
        title: address
    });

    // Adding a click event to the marker
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('address');
            infowindow.open(map, this);
        }); 
   } else {
    alert("Geocode was not successful for the following reason: " + status);
   }
 });

});

</script>
</head>
<body onload="initialize()">

<div id="map_canvas" style="height:800px;width:1000px"></div>

<div>
    <input id="address" type="textbox" value="Type the address here">
    <input type="button" value="Drop the dot" onclick="codeAddress()">
</div>

4

1 に答える 1

2

javascriptエラーのためにいくつかのことを調整した後、それは私のために働きました：

<script>


 var geocoder;
 var map;


 //set the map center
   function initialize() {
 geocoder = new google.maps.Geocoder();
 var latlng = new google.maps.LatLng(43.6481, -79.4042);
 var mapOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 }

// Creating an InfoWindow          
var infowindow = new google.maps.InfoWindow({});


//on click of the drop the dot button, place a marker
 function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);

    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        title: address
    });

    // Adding a click event to the marker
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('address');
            infowindow.open(map, this);
        }); 
   } else {
    alert("Geocode was not successful for the following reason: " + status);
   }
 });

}

</script>
于 2012-08-28T10:17:52.660 に答える