Thread Rating:

lenox · 06-17-2020 02:22 AM

Hi
is there a way to use the Geolocation API https://developers.google.com/maps/docum...https://developers.google.com/maps/documentation/javascript/g to specify the location?

I have tried to extend the resrev_newthread template with the script code. I can then allow the location to be used in the browser but the location is not used on the map.

The template looks like this (changes from line 53)

Code:

  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV6idNxxxxxxxxxxxxxx2PqWWw&callback=initMap">
  </script>
<script type="text/javascript">
var geocoder, map, map2;
function initialize() {
	geocoder = new google.maps.Geocoder();
	var geont = "{$GLOBALS['tplvars']['resrev_geo']}";
	var myLatlng2 =  new google.maps.LatLng{$GLOBALS['tplvars']['resrev_geo']};
	if(geont == ""){
		myLatlng2 =  new google.maps.LatLng(51.165691,10.451526);
	}
	var myOptions2 = {
		zoom: 5,
		center: myLatlng2,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map2 = new google.maps.Map(document.getElementById('map_geol'), myOptions2);
	var marker2 = new google.maps.Marker({
		position: myLatlng2, 
		map: map2
	});
	var myLatlng = new google.maps.LatLng{$GLOBALS['tplvars']['resrev_geo']};
	var myOptions = {
		zoom: 4,
		center: myLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById('map_postbit'), myOptions);
	var marker = new google.maps.Marker({
		position: myLatlng, 
		map: map
	});
}

function codeAddress() {
	var address = document.getElementById('xthreads_resrev_location').value;
	geocoder.geocode({'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			var mylocation = results[0].geometry.location;
			map2.setCenter(mylocation);
			var marker3 = new google.maps.Marker({
				map: map2,
				position: mylocation
			});
			document.getElementsByName("xthreads_resrev_geo")[0].value = mylocation;
		} else {
			alert("Geocode was not successful for the following reason: " + status);
		}
	});
}
</script>
	 <div id="resrev_geo"></div>
    <script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      function initMap() {
        map = new google.maps.Map(document.getElementById('resrev_geo'), {
          center: {lat: -51.165691, lng: 10.451526},
          zoom: 6
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      }
    </script>

Unfortunately I don't know much about maps and the intigration in xthreads and I hope that somebody can help.

Thanks in advance

Greetings lenox

Threaded Mode \| Linear Mode Standard Tools
Forum Jump: View a Printable Version Send this Thread to a Friend Subscribe to this thread