✔ img Tag mit JavaScript Variablen befüllen

@CPoly auch bei dir im Snippet waren noch 2 kleine Fehler und zwar da wo du die Latitude und die Longitude in den src rein machst...

Der Code der hier jetzt drin ist passt zu 100% und localisiert auch automatisch den Standort

<script type="text/javascript" language="javascript">

function success(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
//document.write(lat+','+long);
}

function error(msg) {
console.log(typeof msg == 'string' ? msg : "error");
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert("GeoLocation API ist NICHT verfügbar!");
}

function showMap(){
var karte=window.document.getElementById("Maparea");
karte.src='https://maps.googleapis.com/maps/api/staticmap?center='+lat+','+long+'&zoom=14&size=288x200&markers=&sensor=false';
}
</script>


<div><img id="Maparea" src="Vorschaubild.jpg" width="200" heigth="288"></div>
<a href="javascript:showMap();">Karte anzeigen</a>
 
Ok ich hatte aus dem Original die Zeile
document.write(lat+','+long);
noch drin, die killt alles!
So hier der verwendete Code:
Javascript: 
<body>
<div>Hier soll die Karte auftauchen<br/>
<img id="Maparea" src="" width=600 heigth=600></div>
<script type="text/javascript" language="javascript">

function success(position){
lat = position.coords.latitude;
long = position.coords.longitude;
karte=document.getElementById("Maparea");
karte.src="https://maps.googleapis.com/maps/api/staticmap?center="+lat+","+long+"&zoom=15&size=600x600&markers=&sensor=false";

}
function error(msg){
console.log(msg);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
}
 else {
alert("GeoLocation API ist NICHT verfügbar!");
}

</script>
</body>

So klappt es auch ohne den Link und das Vorschaubild!
 
Zuletzt bearbeitet:
Jetzt sind aber die einfachen hochkommas bei der lat und long falsch jetzt müssen es doppelte sein... ;-)

Denn so wie du es hast localisiert er nicht deinen Standort und zeigt dir eine Static Map an

Code: 
<body>
<div>Hier soll die Karte auftauchen<br/>
<img id="Maparea" src="" width=600 heigth=600></div>
<script type="text/javascript" language="javascript">
 
function success(position) {
 lat = position.coords.latitude;
 long = position.coords.longitude;
karte=document.getElementById("Maparea");
karte.src="https://maps.googleapis.com/maps/api/staticmap?center="+lat+","+long+"&zoom=15&size=600x600&markers=&sensor=false";

}
function error(msg) {
 console.log(typeof msg == 'string' ? msg : "error");
 }

 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(success, error);
 } else {
 alert("GeoLocation API ist NICHT verfügbar!");
 }

</script>
</body>

Wenn du diesen Code verwendest wirst du an deinem richtigen Standort localisiert
 
Ich war irgendwie bei PHP, da werden Variablen auch in "" ersetzt.
Ich habe meine Code korrigiert.
Nachtrag: Die Genauigkeit für meinen Standort wird mit 122 Km angegeben,
http://html5demos.com/geo/
 
Zuletzt bearbeitet:
Ja, ich sitze aber an einem LAN-Kabel, da findet es den Server des Providers, von dem die IP ist. Und der ist nun mal etwas weiter weg als der nächste Mobilfunkmast ;-).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück