• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Google Maps, Positionsbestimmung nur den Standort-Marker auf Karte anpassen

F

fronk

New member
Liebes Forum,
vor einiger Zeit wurde mir hier schon einmal ganz toll mit einem Problem geholfen. Nun hoffe ich auch dieses Mal auf Hilfe. Meine Wissensschwerpunkte liegen leider bei HTML und CSS und nicht bei JavaScript. Daher wird es wenig bringen zu versuchen, mir auf die Sprünge zu helfen. Sondern ich wäre tatsächlich eher an einer Lösung interessiert. Ich habe schon tagelang versucht etliche Beispiele aus dem Netz zu verstehen bzw. auf meinen Fall anzupassen. Leider alles vergeblich. Ich bin deshalb echt am Verzweifeln. Daher meine Bitte um Hilfe.

Was ist das Problem/die Frage:
Ich habe eine Web-App erstellt, welche mittels Google Maps einige Standorte, definiert in einem JSON-Dokument, anzeigt und beim Klick auf die jeweiligen Standort-Marker auf der Karte sollen kleine Hörbeiträge abgespielt werden. Soweit so gut. Das klappt auch wunderbar. Die Karte wird beim Aufruf der App auch auf den aktuellen Nutzer-Standort zentriert. Nun soll es aber so sein, dass die Karten beim Verlassen des Standortes dynamisch aktualisiert wird. Das macht man, soweit habe ich mich schon eingelesen, anstatt mit der Funktion »getCurrentPosition« eben mit der Funktion »watchPosition«. Die Aktualisierung der Karte funktioniert damit auch, allerdings wird immer die komplette Karte neu geladen und das ist sehr lästig und unschön und soll nicht geschehen. Es soll nur der Marker für den aktuellen Nutzer-Standort auf der Karte verschoben werden. Daher meine Bitte, kann sich bitte jemand einmal den Code anschauen und mir eventuell helfen? Ich denke/vermute es ist eigentlich recht leicht zu klären. Mir fehlen aber eben einfach die JavaScript-Grundlagen um das selber zu schaffen. Sollte es notwendig sein würde ich die Hilfe auch nach meinen Möglichkeiten honorieren.

Hier der aktuelle Code:

HTML: 
<!DOCTYPE html>
<html lang="de">
	<head>
	<title>Website</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--<link rel="stylesheet" href="css/ratchet.min.css">-->
	<link rel="apple-touch-icon" href="/custom_icon.png">
	<link rel="apple-touch-icon" href="touch-icon-iphone.png">
	<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
	<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
	<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
	<script src="//maps.googleapis.com/maps/api/js?key=XXX« type="text/javascript"></script>
	<style>
.karte, .google-karte {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.tab-label {
	margin: 5px 0px 0px 0px;
}
h1 {
	font-size: 24px;
}
h2 {
	font-size: 20px;
}
p {
	width: 100%;
	margin: 10px 0px 10px 0px;
}
#content {
	width: 100%;
	padding: 5px;
	margin: 0px 0px 0px 0px;
	background-color: #888;
}
.media-body {
	width: 100%;
	padding: 5px;
	margin: 0px 0px 20px 0px;
}
</style>
	<script type="text/javascript">
		window.scrollTo(0,1);
	</script>
	</head>

	<body>
    <div class="content">
      <div id="karte" class="karte control-content active">
        <div class="google-karte" id="google-karte"></div>
      </div>
      <div class="card control-content" id="liste">
        <div class="table-view" id="standort_list"> </div>
      </div>
      <script>
		     	
      var showPosition = function(position){
		
        width = document.querySelector('#google-karte').offsetWidth;
        height = document.querySelector('#google-karte').offsetHeight;

		  myLatitude = position.coords.latitude;
		  myLongitude = position.coords.longitude;
		  
        var options = { //Maps-Optionen
			center: new google.maps.LatLng(myLatitude, myLongitude),
			zoom: 16,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			disableDefaultUI: true, // blendet alle Google-Bedienungs-Elemente aus
        	styles: [// Ab hier Styling der Karte
				{elementType: 'labels.text.stroke', stylers: [{color: '#4C4C4C'}, {weight: '0.5'}]}, /* Generelle Schriftumrandung */
				{elementType: 'labels.text', stylers: [{color: '#4C4C4C'}, {weight: '0.5'}]}, /* Generelle Beschriftungs-Farbe */
				{featureType: 'administrative', stylers: [{'visibility': 'off'}]}, /* Ortsbezeichnungen */
				{featureType: 'landscape', stylers: [{ color: '#001A4B' }]}, /* Hintergrundfarben */
				{featureType: 'poi', stylers: [{'visibility': 'off'}]}, /* POIs */
				{featureType: 'road', elementType: 'geometry.fill', stylers: [{color: '#1C2F63'}]}, /* Füllfarbe aller  Straßen */
				{featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#1C2F63'}]}, /* Füllfarbe aller  Straßen */
				{featureType: 'road', elementType: 'labels.icon', stylers: [{'visibility': 'off'}]},
				{featureType: 'transit', stylers: [{'visibility': 'off'}]},
				{featureType: 'water', elementType: 'geometry.fill', stylers: [{color: '#33457A'}]}
          ]
        }; // Bis hier Styling der Karte
		  
        karte = new google.maps.Map(document.querySelector('#google-karte'), options); // Erzeuge Karte und blende optionale Elemente ein
        loadStandorte();
      };
		  
      var loadStandorte = function(){
        var standort_list = document.querySelector('#standort_list');
        standort_list.innerHTML = '';

        request = new XMLHttpRequest();
        request.open('get','daten/standort.json',true);
        request.send();
        
		marker0 = new google.maps.Marker({ // Zeigt den aktuellen Standort an
             position: new google.maps.LatLng(myLatitude, myLongitude),
			 map: karte,
			 icon: "stern.png",
			 opacity:1,
			 title:"Aktueller Standort",
            });
		 
		  var infoWindow0 = new google.maps.InfoWindow({ // infoWindow0 zeigt nur den aktuellen Standort an
			content: '<div id="content"><h4>Ihr aktueller Standort</h4></div>'
        });
		
		google.maps.event.addListener(marker0, 'click', function() {
			infoWindow0.open(marker0.get('map'), marker0);
       }); // Ende aktueller Standort
		  
		  // Erstelle ein globales infoWindow object das von allen Markern genutzt wird
		  var infoWindow = new google.maps.InfoWindow();  
		
		 // Looping durch die JSON Daten
         request.addEventListener('load',function(){
           var data = JSON.parse(this.response);
          for(standort in data){
            standort_list.insertAdjacentHTML('beforeend','<li class="table-view-cell media '+data[standort]+'"></li>');
          			  
			  // Erzeuge einen Marker und platziere ihn auf der Karte
			  var marker = new google.maps.Marker({
					map: karte,
					icon:(data[standort].Icon),
					content:(data[standort].Beschreibung),
					opacity:1,
					position: new google.maps.LatLng(data[standort].Position.Latitude,data[standort].Position.Longitude),
					title:(data[standort].Titel)
			  });
			  
			  // The Closure 

			  // Klick-Funktion an aktuellen Marker anhängen
			  google.maps.event.addListener(marker, 'click', function(karte, marker, beschreibung){
				return function(){
					infoWindow.setContent(beschreibung);
					infoWindow.open(karte, marker);
				}
			}(karte, marker, data[standort].Beschreibung));	  
			  
			  google.maps.event.addDomListener(karte, 'click', function() {
				  infoWindow.close();
				  infoWindow0.close();
        });
			  
  } //Ende Loop
        });
      };
			 
function handle_error(error) {
switch (error.code) 
	{
	case error.TIMEOUT:
		alert("Leider konnten Sie nicht geortet werden. Um einen neuen Versuch zu starten rufen Sie bitte die App erneut auf."); // Nochmal versuchen?
		break;
	case error.PERMISSION_DENIED:
		alert("Um diese App nutzen zu können, müssen die Ortungsdienste für diese App aktiviert sein."); // Der Benutzer hat Nein gesagt!
		break;
	case error.POSTION_UNAVAILABLE:
		alert("Ihre Position konnte leider nicht ermittelt werden."); // Position konnte nicht bestimmt werden
		break;
	}
}
		  
      navigator.geolocation.watchPosition(showPosition, handle_error, options);
		var options = {timeout:60000, maximumAge:0, enableHighAccuracy:true};
		  
    </script> 
    </div>
</body>
</html>

Über Hilfe würde ich mich jedenfalls sehr freuen und bedanke mich schon jetzt für alle Bemühungen.

Vielen Dank und viele Grüße
fronk
 
fronk schrieb:
Die Aktualisierung der Karte funktioniert damit auch, allerdings wird immer die komplette Karte neu geladen und das ist sehr lästig und unschön und soll nicht geschehen. Es soll nur der Marker für den aktuellen Nutzer-Standort auf der Karte verschoben werden.
Zum Vergrößern anklicken....

watchPosition übergibst du ja showPosition als callback, showPosition zeichnet die komplette karte.
loadStandorte fügt (unter anderem) den marker für die aktuelle position ein. du musst dir den marker also merken und eine neue funktion erstellen, welche diesen entweder entfernt (https://developers.google.com/maps/documentation/javascript/markers?hl=de#remove) und wieder neu einfügt oder du änderst seine position (mit setPosition https://developers.google.com/maps/documentation/javascript/reference#Marker). diese neue funktion übergibst du dann an watchPosition als callback
 
Hm, leider habe ich nicht wirklich alles verstanden. Ich versuche es mal zu interpretieren. Der erste Teil bis loadStandorte fügt die Marker ein, das habe ich wahrscheinlich soweit verstanden. Dann sollte ich eine neue Funktion einfügen, welche meinen marker0 (aktueller Standort) neu ausrichtet?

Eine Gegenfrage, kann ich nicht mit der Funktion »getCurrentPosition« einmalig die aktuellen Position bestimmen die Karte und die festen Marker zeichnen lassen und danach mit »watchPosition« nur die Position des tatsächlichen Standortes anzeigen und danach aktualisieren lassen?

also:
setPosition(Latitude, Longitude) aus der watchPosition-Abfrage?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben