Блог

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

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

1. На карте отображается исходный геокод (34.05, -118.24), который задан до того, как api геокодирует переменную, которую я ему передал. Когда я удаляю этот lat / long, карта вообще не работает. Как я могу остановить отображение на карте исходной широты / задолго до геокодирования адреса, который я ей дал?
2. Я бы хотел, чтобы пользователь мог щелкнуть маркер и получить результат (т. Е. «Привет, мир»). До сих пор методом проб и ошибок я не смог успешно сделать маркер интерактивным.

Пожалуйста, помогите!! Заранее спасибо, как всегда.

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

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

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