✔ img Tag mit JavaScript Variablen befüllen

[ghostrider_bb]

Hallo zusammen,

Ich möchte eine Automatische Standort erkennung mahcen und dafür GeoLocation nutzen.
Und die Koordinaten dann in einer statischen Googlemaps anzeigen lassen. Jedoch habe ich keine Ahnung wie ich die Koordinaten (latitude und longtitude) in den HTML Tag bekomme

<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!");
}
</script>

<img src="https://maps.googleapis.com/maps/api/staticmap?
center=[hier hin soll die Variable lat],[hier hin soll die Variable long]
&amp;zoom=14&amp;size=288x200
&amp;markers=
&amp;sensor=false"height="200" width="288">

Ich hoffe ihr könnt mir helfen

 

[ikosaeder]

So könnte es gehen:

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"height="200" width="288";
}

<div id="Maparea"><img src="Vorschaubild.jpg" width="200" heigth="288"></div>
<a href="javascript:showMap();">Karte anzeigen</a>

 

[ghostrider_bb]

Danke schon mal,
aber ich weiß ja nicht ob ich zu blöd bin den Code zu verwenden aber ich bekomm immer nur ein leeres img Fenster mit nem Fragezeichen in der Mitte angezeigt...

Ich hab es über den Browser (Opera)
und übers Handy probiert (Android)

hat evtl jemand noch nen Tipp

 

[CPoly]

ikosaeder hat sich leicht vertan, denn er hat dem div die ID "Maparea" gegeben, und nicht dem Bild. Deshalb wird das src Attribut nicht gesetzt. Also gib dem Bild stattdessen die ID "Maparea".

 

[ghostrider_bb]

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

<div><img id="Maparea" src="Vorschaubild.jpg" width="200" heigth="288"></div>
<a href="javascript:showMap();">Karte anzeigen</a>

Das ist jezt der Code aber trotz id im img Tag hat sich nichts geändert
Ich verzweifel so langsam

 

[CPoly]

1. Was sucht das hier im JS code?: "height="200" width="288""
2. Da gehören anstelle von "&amp;" normale "&" hin
3. Vor den "&amp;" sind Leerzeichen.

Zugegen, das hat ikosaeder bereits falsch gehabt.

 

[ghostrider_bb]

OK ich habe deine Tipps jetzt mal befolgt und noch einen Fehler gefunden aber da wird leider weiterhin nichts angezeigt und ich bin leider nicht so JavaScript bewandert das ich da komplett durchsteig...

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

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>

Kannst du mir bitte den Code so hinbiegen das es funktioniert da ich langsam echt die kriese bekomm...
gruß ghostrider_bb

 

[CPoly]

Du hast 2. nicht korrekt umgesetzt. Da ist am Ende immer noch ein Semikolon.

<script type="text/javascript" language="javascript">
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>

Das funktioniert bei mir. Natürlich muss eine "lat" und "long" variable vorhanden sein.

 

[ikosaeder]

Das mit den & ist mir auch gerade aufgefallen.
Ich habe den String einfach kopiert, das klappt natürlich nicht.
Komischerweise klappt auch die Version nicht, die CPoly jetzt da hat.

 

[CPoly]

Meins 1zu1 kopiert https://tinker.io/77a46