простая карта Google с геокодированием - PullRequest
2 голосов
/ 07 декабря 2011

Я сделал простую GoogleMap, которая отвечает на script.php?q=canada и показывает карту.

Одна проблема - он всегда загружает карту с центром var latlng = new google.maps.LatLng(34.052234,-118.243685); на секунду, а затем загружает правильную карту.

Что не так с моим кодом?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?=$_GET['q']?></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<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 = '<?=$_GET['q']?>';

                var myOptions = {
                  zoom: 10,
                  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);
                  // autozoom
                  map.fitBounds(results[0].geometry.viewport);
                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location,
                        title: 'by Quick Maps',
                        clickable: false
                    });
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
              }
            </script>
 </head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Sidequestion: как заменить alert("Geocode was not successful for the following reason: " + status); простым сообщением на карте?

Ответы [ 2 ]

2 голосов
/ 07 декабря 2011

1) Карта Google инициализируется в одном месте, затем вы сообщаете ему другое. Итак, у вас есть 2 варианта:

a)Move the map instantiation into the geocode callback.
b)Initialize to the location you want.  To do this you will need to read a bit more about how google maps works instead of just using their basic example.

2) Что касается приятного сообщения об ошибке вместо абразивного предупреждения, добавьте его в свой HTML.

<p id="errorMessage" style="display:none;">Sorry, couldn't find that address</p>

Затем отобразите его вместо предупреждения.

} else {

    // alert("Geocode was not successful for the following reason: " + status);
    document.getElementById('errorMessage').style.display = "block";               
}

В последних версиях карт Google есть несколько хороших наложений, но в основном они охватывают местоположения и диапазоны областей на карте, а не общую текстовую информацию. Итак, вы видите, что вам нужно создать свой собственный интерфейс за пределами карты, на странице HTML выше или ниже ее. Если вы действительно хотите показать его поверх карты, вы можете установить следующие свойства css в div errorMessage:

#errorMessage {
    position:absolute;
    left: 50%;
    top: 30%;
}
1 голос
/ 07 декабря 2011

Быстрый ответ - переместить экземпляр карты в обратный вызов геокода.

 geocoder.geocode( { 'address': address}, function(results, status) {
  var myOptions = {
                  zoom: 10,
                  center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      ...
  });

Это помешало бы отображению карты с центром в районе 34.052234, -118.243685.

Что касается пользовательского опыта, когда результаты не возвращаются, вы можете скрыть карту и отобразить некоторый текст, например?

document.getElementById('map_canvas').style.display = 'none';
document.getElementsByTagName('body')[0].innerHTML = 'Geocode was not successful for the following reason: " + status;

Но то, что вы хотите здесь сделать, должно сильно зависеть от общего пользовательского интерфейса вашего решения:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...