谷歌地图API v3 -(1)地图暂时闪烁坏地理代码(2)添加标记点击事件

Question

我已经设法尝试/错误地把一个工作谷歌v3 api，地理编码地址来自数据库。

现在我正努力完成最后两项任务:

1. 地图闪烁原始地理编码(34.05，-118.24)，这是在api地理编码变量之前设置的，我已经传递给它。当我移走这个地方时，地图就完全不工作了。我怎样才能在对我给它的地址进行地理编码之前阻止地图闪烁原始的时间/时间?
2. 我希望用户能够点击标记，并得到一个结果(即:"Hello World")。到目前为止，通过反复试验，我还没有成功地使标记可点击。

请帮助! !一如既往地提前致谢。

$address, $city, $state and such are php variables coming from mysql

我的google脚本看起来像这样:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
              var geocoder;
              var map;
              function initialize() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(34.052234,-118.243685);
                var address = '<?php echo $address.', '.$city.', '.$state; ?>';
                var myOptions = {
                  zoom: 14,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                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
                    });
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
              }

            </script>

Answer 1

因此，要使标记可单击，需要在其上设置一个事件侦听器。你还需要一个信息窗口来显示你的"hello world"。这两个功能都可以，将它添加到初始化函数中。

var marker = new google.maps.Marker({
    map: map, 
    position: results[0].geometry.location
});
var infowindow =  new google.maps.InfoWindow({
    content: 'Hello World!',
    map: map
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, this);
});

我还会考虑在创建地图之前对您的地址进行地理编码，因此您可以使用results[0].geometry。初始设置地图中心的位置。

      var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(34.052234,-118.243685);
        var address = '<?php echo $address.', '.$city.', '.$state; ?>';
        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            myOptions.center = results[0].geometry.location;
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location
            });
            var infowindow =  new google.maps.InfoWindow({
                content: 'Hello World!',
                map: map
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, this);
            });
          } else {
            alert("Geocode was not successful for the following reason: " + status);
            // just open the map at the default latlng
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }
        });
      }