Google Map API v3 - (1) карта временно мигает с плохим геокодом (2) добавить событие щелчка маркером

Question

Мне удалось методом проб / ошибок собрать работающий API Google v3, который геокодирует адрес, поступающий из базы данных.

Теперь я пытаюсь выполнить две последние задачи:

1. На карте мигает исходный геокод (34.05, -118.24), который установлен до того, как api геокодирует переменную, которую я ему передал. Когда я удаляю этот lat / long, карта вообще не работает. Как я могу остановить отображение на карте исходного лат / задолго до того, как геокодировать адрес, который я ей дал?
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

Таким образом, чтобы сделать маркер кликабельным, на нем должен быть прослушиватель событий.Также вам нужно, чтобы информационное окно отображало ваш «привет мир».Это делает и то и другое, добавляя его в вашу функцию инициализации.

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.location для установкиизначально центр карты.

      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);
          }
        });
      }