Использование адреса вместо долготы и широты с помощью API Карт Google

Я слышал, что можно отправить адрес вместо Долгота и Широта, и это было бы намного более выполнимо для моей системы. Пользователь должен ввести свой адрес при создании своего профиля, а затем их профиль отобразит Карты Google своего дома. В настоящее время API Google Maps отлично работает с долготой и широтой:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css" />
    <title>Login Page</title>

<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="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
  center: new google.maps.LatLng(52.640143,1.28685),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.640143,1.28685),
    map: map,
    title: "Mark On Map"
});
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>

Пожалуйста, помогите мне изменить мой код, чтобы он позволял API Карт Google запрашивать адрес на своем месте, потому что я хочу прочитать адрес пользователя непосредственно из базы данных mySQL.

Ответ 1

См. этот пример, который инициализирует карту в "Сан-Диего, Калифорния".

Использует Google Maps Javascript API v3 Geocoder для перевода адреса в координаты, которые могут отображаться на карте.

<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>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var address ="San Diego, CA";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
 <div id="map_canvas" style="width:100%; height:100%">
</body>
</html>

фрагмент рабочего кода:

var geocoder;
var map;
var address = "San Diego, CA";

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  if (geocoder) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

          var infowindow = new google.maps.InfoWindow({
            content: '<b>' + address + '</b>',
            size: new google.maps.Size(150, 50)
          });

          var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: address
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" ></div>

Ответ 2

Вот мой код для создания карты из местоположения

HTML-код

          <div class="col-md-2">
             <address> <?php echo $doctorInfo[0]->serachLocation;?> // set address for which you need to generate map</address>
          </div>

Код Javascript

<script>
     $(document).ready(function(){
        $("address").each(function(){
             var embed ="<iframe width='425' height='350' frameborder='0' 
              scrolling='no' marginheight='0' marginwidth='0' 
              src='https://maps.google.com/maps?&amp;q="+ 
              encodeURIComponent( $(this).text() ) +"&amp;output=embed'>
             </iframe>";
             $(this).html(embed);
       });
     });
 </script>

чтобы узнать больше нажмите здесь

Ответ 3

Геокодирование - это процесс преобразования адресов (например, "1600 Amphitheatre Parkway, Mountain View, CA" ) в географические координаты (например, широта 37.423021 и longitude -122.083739), которые вы можете использовать для размещения маркеров или поместите карту.

Будет ли это то, что вы ищете: Содержит образец кода
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

Ответ 4

Вы можете проанализировать геолокацию по адресам. Создайте массив с помощью jquery следующим образом:

//follow this structure
var addressesArray = [
  'Address Str.No, Postal Area/city'
]

//loop all the addresses and call a marker for each one
for (var x = 0; x < addressesArray.length; x++) {
  $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addressesArray[x]+'&sensor=false', null, function (data) {
    var p = data.results[0].geometry.location
    var latlng = new google.maps.LatLng(p.lat, p.lng);
    //it will place marker based on the addresses, which they will be translated as geolocations.
    var aMarker= new google.maps.Marker({
      position: latlng,
      map: map
    });
  });
}

Также обратите внимание, что Google ограничивает ваши результаты, если у вас нет служебной учетной записи, и вы можете получить ошибку, если используете слишком много адресов.

Ответ 5

var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: latlng
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == '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);
  }
});
}

<body onload="initialize()">
 <div id="map" style="width: 320px; height: 480px;"></div>
 <div>
   <input id="address" type="textbox" value="Sydney, NSW">
   <input type="button" value="Encode" onclick="codeAddress()">
 </div>
</body>

Или обратитесь к документации https://developers.google.com/maps/documentation/javascript/geocoding

Ответ 6

Хотя я хотел бы поделиться этим фрагментом кода, который я использовал ранее, он добавляет несколько адресов через геокод и добавляет эти адреса как маркеры...

var addressesArray = [
  'Address Str.No, Postal Area/city',
  //follow this structure
]
var map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: 12.7826,
    lng: 105.0282
  },
  zoom: 6,
  gestureHandling: 'cooperative'
});
var geocoder = new google.maps.Geocoder();
for (i = 0; i < addressArray.length; i++) {
  var address = addressArray[i];
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === 'OK') {
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        center: {
          lat: 12.7826,
          lng: 105.0282
        },
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}