Używanie adresu zamiast długości i szerokości geograficznej Z Google Maps API

Słyszałem, że możliwe jest przesłanie adresu zamiast długości i szerokości geograficznej, co byłoby znacznie bardziej realne dla mojego systemu. Użytkownik musi wprowadzić swój adres podczas tworzenia swojego profilu, a następnie jego profil wyświetli Mapę Google swojego domu. Obecnie mam API Map Google działa idealnie z długość i szerokość geograficzna:Używanie adresu zamiast długości i szerokości geograficznej Z Google Maps API

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

Proszę mógłby ktoś mi pomóc zmienić mój kod tak, że umożliwia Google Maps API do żądania adresu na swoim miejscu, ponieważ chcę, aby przeczytać Adres użytkownika bezpośrednio z bazy danych mySQL.

Źródło

2013-04-10 edwoollard

Zobacz this example, inicjuje mapę do "San Diego, CA".

Wykorzystuje interfejs API JavaScript Map Google v3 Geocoder do tłumaczenia adresu na współrzędne, które można wyświetlić na mapie.

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

kod działa urywek:

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>

Źródło

2013-04-10 14:15:13 geocodezip

Dziękuję bardzo, udało się zagrać z tym kodem i naprawić go za pomocą moje, aby uzyskać działające rozwiązanie.Działa teraz idealnie, wprowadzając adres! – edwoollard

Twój przykład działa jak zaklęcie w pliku HTML, ale gdy włączyłem go w mój motyw WordPress przy użyciu kodu PHP, Marker nie jest już widoczny i Zoom nie działa. Czy możesz mi to naprawić? –

Jakie błędy javascript dostałeś? Jednak jest to prawdopodobnie problem z css, co decyduje o wielkości twojej mapy? – geocodezip

Geocoding jest proces przekształcania adresów (na przykład „1600 Amphitheatre Parkway, Mountain View, CA”) do współrzędnych geograficznych (jak szerokość i długość geograficzna -122,083739 37.423021), które można wykorzystać do umieszczenia znaczników lub umieść mapę .

Czy jest to czego szukasz: Zawiera przykładowy kod
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

Źródło

2013-04-10 12:38:32

Tak że wydaje się być to, czego potrzebuję. Widziałem to ostatniej nocy. Dzięki! Czy jest jakiś sposób, aby pomóc mi w uruchomieniu go w moim kodzie? Jestem bardzo nowy w javascript. – edwoollard

Wszystkie przykłady, które widziałem, używają pól tekstowych. Po prostu chcę, żeby to działało ode mnie, wprowadzając dane osobiście na razie, ponieważ później zostanie przesłane za pośrednictwem Serwletu, jako tekst do HTML. – edwoollard

Jeśli jest to po prostu testowanie, wpisz var address = zamiast pobrać go z elementu adresu. Jeśli pracujesz z Javą, sugeruję użycie czegoś takiego jak http://code.google.com/p/geocoder-java/ –

można analizować poprzez geolokalizacji adresów. utworzyć tablicę z jquery tak:

var addressesArray = [ 
'Address Str.No, Postal Area/city', 
//follow this structure 
] 
    //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); 
     var aMarker= new google.maps.Marker({ 
      position: latlng, //it will place marker based on the addresses, which they will be translated as geolocations. 
      map: map 

     }); 

}

Proszę również pamiętać, że Google zawęzić jeśli nie masz konta biznesowego z nimi, a moja pojawi się błąd, jeśli używasz zbyt wiele adresów.

Źródło

2015-10-09 11:39:40 Sidius

Oto mój kod, aby wygenerować mapę z lokalizacją

HTML Code

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

to know more click here

Źródło

2015-11-24 06:16:24

Używanie adresu zamiast długości i szerokości geograficznej Z Google Maps API

Odpowiedz

Powiązane problemy