地理编码器放置标记后如何创建信息窗口答案

【问题标题】：How to create an infowindow after geocoder has placed a marker地理编码器放置标记后如何创建信息窗口
【发布时间】：2012-07-22 07:59:53
【问题描述】：

您好，我是 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>

【问题讨论】：

标签： marker infowindow

【解决方案1】：

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

【讨论】：