Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Adresskoordinaten mit der Google Maps Api 3 und jQuery bekommen
Ich beschäftige mich gerade mit der Google Maps Api 3 und habe gedacht dieses Script, könnte dem ein oder anderen sicherlich helfen Koordinaten für eine Adresse zu bekommen.
Im Nachfolgenden ist eine komplette test.html-Datei abgebildet.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function getcoord() {
var user1Location = jQuery("input").val();
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode({
address: user1Location
}, function(locResult) {
console.log(locResult);
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
$("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>");
});
}
$(document).ready(function(){
$(".los").click(function(){
getcoord();
return false;
});
});
</script>
<input type="text" />
<a href="#" class="los">Los</a>
<div id="testDiv"></div>
Was macht die Datei?
Es wird jQuery und die Google Map eingebunden.
Ein Input-Feld dient zur Adresseingabe, ein Link zum Absenden der Adresse und eine leerer Div-Container in dem die Koordinaten geschrieben werden.
Das Script macht dann folgendes:
$(".los").click(function(){
getcoord();
return false;
});
Hier wird die Funktion getcoord() aufgerufen bei Klick auf den Link. Das return false dient dazu, dass dem Link nicht gefolgt.
function getcoord() {
var user1Location = jQuery("input").val();
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode({
address: user1Location
}, function(locResult) {
console.log(locResult);
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
$("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>");
});
}
Am Anfang wird die Adresse aus dem Inputfeld ausgelesen. Der Rest ist Benutzung der Google Api. Die Adresse wird der Api übermittelt, diese gibt ein Resultat zurück in dem der Breiten- und Längengrad stehen. (lat1,lng1)
Danach wird das Ergebnis in den Container testDiv geschrieben. Das wars auch schon ;)
Ich hoffe ich konnte euch damit weiterhelfen.
Kommentare
ich habe das Google map auf dem Smartphone und habe jetzt festgestellt, das Adressen angegeben waren, bei denen ich nicht war. Gibt es da Fehler in der Programmierung oder Darstellung?
Mit freundlichem Gruß
Werner Strohmaier
Hinterlasse einen Kommentar