Verwenden von Adresse statt Längen- und Breitengrad mit Google Maps-API

Ich habe gehört, dass es möglich ist, eine Adresse anstelle von Längengrad und Breitengrad zu übermitteln, und dies wäre viel praktischer für mein System. Der Benutzer muss seine Adresse bei der Erstellung seines Profils eingeben und sein Profil wird dann eine Google Maps von ihrem Haus anzeigen. Im Moment habe ich den Google Maps API arbeitet perfekt mit Längen- und Breitengrad:Verwenden von Adresse statt Längen- und Breitengrad mit 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>

Bitte könnte jemand mir helfen, meinen Code zu ändern, so dass es den Google Maps API ermöglicht eine Adresse an seiner Stelle zu beantragen, weil wir lesen wollen die Adresse des Benutzers direkt aus der mySQL-Datenbank.

Quelle

2013-04-10 edwoollard

Siehe this example, initialisiert die Karte auf "San Diego, CA" enthält.

Verwendet die Google Maps Javascript API v3 Geocoder, um die Adresse in Koordinaten zu übersetzen, die auf der Karte angezeigt werden können.

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

Arbeits Code-Schnipsel:

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>

Quelle

2013-04-10 14:15:13 geocodezip

Vielen Dank, es geschafft, mit dem Code auf diesem zu spielen und es mit zu reparieren meins, um eine funktionierende Lösung zu bekommen.Es funktioniert jetzt perfekt, indem man die Adresse eingibt! – edwoollard

Ihr Beispiel funktioniert wie ein Charm in einer HTML-Datei, aber während ich es mit PHP-Code in mein WordPress-Theme integriert habe, ist Marker nicht mehr sichtbar und Zoom funktioniert nicht. Kannst du mir bitte den Fehler sagen? –

Welche Javascriptfehler erhalten Sie? Es ist jedoch wahrscheinlich ein CSS-Problem, was bestimmt die Größe Ihrer Karte? – geocodezip

Geocoding ist der Prozess der Konvertierung von Adressen (wie „1600 Amphitheatre Parkway, Mountain View, CA“) in geographischen Koordinaten (Breitengrad wie 37,423021 und Länge -122,083739), die Sie Marker platzieren können oder die Karte positionieren .

Wäre es das, was Sie suchen: Beispielcode
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

Quelle

2013-04-10 12:38:32

Ja, das scheint zu sein, was ich brauche. Ich habe das letzte Nacht gesehen. Vielen Dank! Gibt es irgendeine Möglichkeit, wie Sie mir helfen können, es in meinem Code zum Laufen zu bringen? Ich bin sehr neu in Javascript. – edwoollard

Alle Beispiele, die ich gesehen habe, verwenden Textboxen. Ich möchte einfach nur, dass es funktioniert, weil ich die Daten für den Moment selbst eingegeben habe, da es später über ein Servlet als Text in den HTML-Code gesendet wird. – edwoollard

Wenn es einfach zum Testen make var Adresse = , anstatt es von Adresse Element bekommen. Wenn Sie mit Java arbeiten, empfehle ich so etwas wie http://code.google.com/p/geocoder-java/ –

Sie können die Geolocation durch die Adressen analysieren. Erstellen Sie ein Array mit jQuery wie folgt aus:

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 

     }); 

}

Bitte beachten Sie auch, dass Google Ihre Ergebnisse begrenzen, wenn Sie nicht über ein Geschäftskonto mit ihnen haben, und Sie meine eine Fehlermeldung erhalten, wenn Sie zu viele Adressen verwenden.

Quelle

2015-10-09 11:39:40 Sidius

Hier ist mein Code

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-Code Karte von Ort zu erzeugen

<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

Quelle

2015-11-24 06:16:24

Verwenden von Adresse statt Längen- und Breitengrad mit Google Maps-API

Antwort

Verwandte Themen