如何在Google Map上添加当前位置标记

Question

I have recently developed a website but I haven't been able to show the current location marker on the Google map after the location was found.

You can have a look on https://www.storra.com/listings/

I have added a custom listener to the function.php based on Listify auto-locate function but didn't manage to add the marker to the map. The code is as following,

 function listify_custom_autolocation() { if ( ! ( is_front_page() || listify_is_job_manager_archive() ) ) { return; } ?> <script> var triggered = false; jQuery(document).on( 'facetwp-loaded', function() { if ( ! triggered ) { var locate = jQuery( '.locate-me' ); 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 }) }); } triggered = true; }); </script> <?php } add_action( 'wp_footer', 'listify_custom_autolocation', 9999 ); 

Would very much appreciate if someone could guide me out. Thank you!

Answer 1

You could use this one for your locate function:

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

The following is the relevant code on the backend. I tried adding the code given by @mxlse but didn't seem to work too.

  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; };