So fügen Sie eine aktuelle Standortmarkierung in Google Map hinzu

Question

Ich habe vor Kurzem eine Website entwickelt, aber ich konnte die aktuelle Standortmarkierung auf der Google-Karte nicht anzeigen, nachdem der Standort gefunden wurde.

Sie können einen Blick auf https://www.storra.com/listings/

Ich habe einen benutzerdefinierten Zuhörer zum function.php auf Listify Auto-Locate-Funktion basiert hinzugefügt, aber verwalten nicht die Markierung auf der Karte hinzuzufügen. Der Code ist wie folgend,

function listify_custom_autolocation() { 
 
\t if (! (is_front_page() || listify_is_job_manager_archive())) { 
 
\t \t return; 
 
\t } 
 
?> 
 
\t <script> 
 
\t \t var triggered = false; 
 
\t \t jQuery(document).on('facetwp-loaded', function() { 
 
\t \t \t if (! triggered) { 
 
\t \t \t \t var locate = jQuery('.locate-me'); 
 
\t \t \t \t locate.trigger('click'); 
 
       var marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: new google.maps.LatLng(
 
        parseFloat(coords[0]), 
 
        parseFloat(coords[1]) 
 
       ), 
 
       info: new google.maps.InfoWindow({ 
 
        content: val.title + val.distance 
 
       }) 
 
      }); 
 
\t \t \t } 
 
\t \t \t triggered = true; 
 
\t \t }); 
 
\t </script> 
 
<?php 
 
} 
 
add_action('wp_footer', 'listify_custom_autolocation', 9999);

würden uns sehr freuen, wenn mir jemand führen könnte aus. Vielen Dank!

Answer 1

Sie können diese für Ihre Locate-Funktion verwenden:

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 
     var marker = new google.maps.Marker({ 
      position: pos, 
      map: map, 
      title: 'Your position' 
     }); 
     map.setCenter(pos); 
    }, function() { 
     //handle location error (i.e. if user disallowed location access manually) 
    }); 
} else { 
    // Browser doesn't support Geolocation 
} 

Answer 2

Im Folgenden ist der entsprechende Code im Backend. Ich habe versucht, den Code von @mxlse hinzuzufügen, schien aber auch nicht zu funktionieren.

AutoLocateView.prototype.find = function() { 
 
     var cv, error, filters, success; 
 
     cv = this.collectionView; 
 
     filters = this.filters; 
 
     if (!navigator.geolocation) { 
 
      return; 
 
     } 
 
     success = function(position) { 
 
      var lat, lng; 
 
      lat = position.coords.latitude; 
 
      lng = position.coords.longitude; 
 
      cv.set({ 
 
      'lat': lat, 
 
      'lng': lng 
 
      }); 
 
      return $('.locate-me').removeClass('loading'); 
 
     }; 
 
     error = function() { 
 
      $('.locate-me').removeClass('loading'); 
 
      return filters.startup(); 
 
     }; 
 
     navigator.geolocation.getCurrentPosition(success, error); 
 
     return this; 
 
     };