嗨,我对 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>