Ergebnis 1 bis 3 von 3
  1. #1
    fronk ist offline Grünschnabel
    registriert
    30-05-2017
    Beiträge
    5

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

    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-Code:
    <!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

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.640

    AW: Google Maps, Positionsbestimmung nur den Standort-Marker auf Karte anpassen

    Zitat Zitat von fronk Beitrag anzeigen
    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.
    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/d...s?hl=de#remove) und wieder neu einfügt oder du änderst seine position (mit setPosition https://developers.google.com/maps/d...ference#Marker). diese neue funktion übergibst du dann an watchPosition als callback

  3. #3
    fronk ist offline Grünschnabel
    registriert
    30-05-2017
    Beiträge
    5

    AW: Google Maps, Positionsbestimmung nur den Standort-Marker auf Karte anpassen

    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?

Ähnliche Themen

  1. URLs für mehrere Marker in Google Maps API
    Von micia im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 05-08-2014, 13:58
  2. Google Maps API V3 Marker problem
    Von crnkjex im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 04-06-2014, 12:56
  3. Google Maps Marker Problem
    Von donstreiff im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 18-10-2011, 15:26
  4. Google Maps API: Karte in Div platzieren
    Von jilli im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 19-06-2009, 12:04
  5. Farbige Marker für Google Maps
    Von Mamm im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 19-10-2008, 18:15

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •