如何在地理编码器放置标记后创建infowindow

嗨我对Google Maps APi相当陌生。如何在地理编码器放置标记后创建infowindow

我已经创建了一个地址解析地址并绘制标记的脚本。

我想添加一个信息窗口到标记位置与用户在地址字段中键入的地址。

我遇到了信息窗口没有出现的问题，也许它在脚本的错误位置。

你可以看看。

这里是我的脚本，感谢你的帮助

<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>

来源

2012-07-24 user1484172

它的工作对我来说，调整的几件事情对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-28 10:17:52 Sean

如何在地理编码器放置标记后创建infowindow

回答

相关问题