Google Maps API v3 - простой, но добавляющий геокод адреса из php / mysql - PullRequest
Новая
       20

Google Maps API v3 - простой, но добавляющий геокод адреса из php / mysql

1 голос
/ 21 октября 2011

У меня есть эта простая здравствующая мировая версия gav map api javascript v3, и она работает для статического геокода.Мои данные - это обычные адреса (т. Е. «30 центров Рокфеллера, Нью-Йорк, Нью-Йорк»).

Эти данные вызываются с помощью php из базы данных mysql.Я могу получить адрес на странице с чем-то вроде этого ... Для целей этого поста, скажем, что это будет иметь всю информацию: адрес, город, штат, почтовый индекс 

<?php echo $row_query_details['address'];?>

Итак, мне нужногеокодировать эту информацию для карты.Я очень доволен mysql и php, но не так сильно с javascript.Я был пробой / ошибкой и исследовал это в течение нескольких дней.

Я искал повсюду рабочий образец или пример и чувствую, что эту относительно простую проблему, должно быть, много раз задавали и отвечали, но я не могу понять это!

Вот код, с которым я работаю: 

            <!DOCTYPE html>
            <html>
            <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
              html { height: 100% }
              body { height: 100%; margin: 0; padding: 0 }
              #map_canvas { height: 100% }
            </style>
            <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?sensor=false">
            </script>
            <script type="text/javascript">
              function initialize() {
                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                  zoom: 8,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
             var marker = new google.maps.Marker({
                  position: latlng,
                  title:"Hello World!"
              });

              // To add the marker to the map, call setMap();
              marker.setMap(map);  
              }

            </script>
            </head>
            <body onload="initialize()">
              <div id="map_canvas" style="width:500px; height:500px"></div>
            </body>
            </html>

Ответы [ 3 ]

2 голосов
/ 26 октября 2012

Здравствуйте и с юбилеем (относительно вашего вопроса и учебника).Я веб-разработчик и должен поблагодарить вас.Я использовал этот учебник, так как в настоящее время у меня нет способа геокодировать с помощью отправки (широта / долгота должна быть извлечена из адреса, сохраненного в БД), поскольку я обращаюсь к существующему сайту и имею минимальный доступ к коду бэкенда.

Чтобы ответить на ваш вопрос о маркере интерактивности, нужно выполнить несколько простых шагов:

1) Предоставить некоторый контент.Это делается перед объявлением геокодера (var geocoder;): 

var contentString = 
  'line 1'+
  'line 2';

2) Под объявлением маркера (var marker = new google.maps.Marker ({) вам нужно будет объявить информационное окно и добавитьслушатель события: 

var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Редактировать:

Я успешно извлек информацию массива из базы данных MySQL, расширив ваш метод. Мой метод здесь:

1) Базовый php ниже: 

include (dbinfo.php)
$result = mysql_query( 'SELECT * FROM table')
$count = 0

2) Настройка API Google Maps: 

<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=yourkey&sensor=false">
</script>

3) Настройка геокодирования ниже: 

<script type="text/javascript">
var geocoder;
var map;
function initialize() {
var latlng = new google.maps.LatLng(yourlat, yourlong); //This is to center the map
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
                }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php  //Starts while loop so all addresses for the given information will be populated.
while($row = mysql_fetch_array($result)) //instantiates array
{ ?>            
geocoder = new google.maps.Geocoder();
var address = '<?php echo $row['address'].', '.$row['city'].', '.$row['state'].', '.$row['zip'].', '.$row['country']; ?>';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//marker generation is done though adding the primary ID to the "marker" variable, so if address "1" has the primary ID of "1", your marker would read "marker1"
var marker<?php print $row['primaryID']; ?> = new google.maps.Marker({
map: map, 
position: results[0].geometry.location,
title: "This can be a php variable or whatever you like.  It is displayed on hover."
                    });

//var contentString manages what is seen inside of the popup            
var contentString = 
'line 1'+
'line 2';

var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker<?php print $row['primaryID']; ?>, 'click', function() {
infowindow.open(map,marker<?php print $row['primaryID']; ?>);
                    });
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
                <?php
    $count++;
} //ends while
?>
              }

/*end javascript*/
</script>

Большое спасибо еще раз за размещение этого.Это было очень полезно.

0 голосов
/ 26 октября 2011

Итак, я собираюсь ответить на свой вопрос здесь. Первый ответ при условии, что я не смог произнести. Я не уверен, был ли ответ неполным или я просто не следовал ему. В любом случае, вот как выглядит код:

Сначала мои компоненты адресов извлекались из базы данных mysql, и я назначал им переменные, например: 

$county = $row_qry['county'];
$address = $row_qry['address'];
$city = $row_qry['city'];
$state = $row_qry['state'];

Тогда мой гугл v3 выглядит так: 

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

И такой ответ на мой вопрос. Есть еще пара вопросов, которые мне еще нужно решить, например: (а) как сделать маркер интерактивным и (б) карта мигает с геокодом, определенным вначале (34.05, -118.24), прежде чем показывать правильный адрес .

Обе эти проблемы мне еще нужно решить, но, по крайней мере, геокодирование работает успешно. Надеюсь, это поможет кому-то еще.

Спасибо!

0 голосов
/ 21 октября 2011

Вы можете использовать переменную PHP в JavaScript, передав переменные php в функцию initialize () .

тег вашего тела будет выглядеть ниже;

Например:

<body onload="initialize('<?php echo $row_query_details['address'];?>')">

Затем вы будете использовать эту конкретную переменную в своем коде JavaScript, ваша функция JavaScript будет выглядеть следующим образом: 

<script type="text/javascript">
              function initialize(address) {

                var G_address = address;

                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                  zoom: 8,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
             var marker = new google.maps.Marker({
                  position: latlng,
                  title:"Hello World!"
              });

              // To add the marker to the map, call setMap();
              marker.setMap(map);  
              }

            </script>

Теперь вы можете динамически использовать эту G_address переменную JavaScript в вашем коде G-MAP ..

Это будет полезно для вас ..

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

Нет похожих вопросов

...