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

***RateU*** · 06-21-2020 06:01 AM

(06-17-2020 02:22 AM)lenox Wrote: 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.

Do you mean the location is not used on the map after the thread is posted or the location is not detected by the browser after it is allowed to detect your location (before the thread is posted)?
Unfortunately, I can't test it because I don't have the API.

lenox · 06-21-2020 11:15 PM

I would like the position on the map to be set automatically by clicking on Location.
By clicking on Location the field resrev_location should then automatically adopt the position found.

If I try to use the code as described above I only get a message in the browser if I want to release the location. If you release the location on the map but no location is set.

***RateU*** · 06-22-2020 01:11 AM

You need to capture the location detected into the resrev_geo custom field. It is where the coordinate is saved as (Lat, Lng) (IIRC).
The code in original code to capture the value into the field is:

Javascript Code

document.getElementsByName("xthreads_resrev_geo")[0].value = mylocation;

In your code, maybe you can add something like this:

Javascript Code

document.getElementsByName("xthreads_resrev_geo")[0].value = '('+position.coords.latitude+', '+position.coords.longitude+')';

after the:

Javascript Code

map.setCenter(pos);

See whether coordinates is captured in the textbox or not (after you are allowing the browser to detects your location).

lenox · 06-22-2020 04:43 AM

Thanks for the help, unfortunately it does not work that way yet.

I have the code

Code:

document.getElementsByName("xthreads_resrev_geo")[0].value = '('+position.coords.latitude+', '+position.coords.longitude+')';

after

Code:

map.setCenter(pos);

added and allows the browser to detect the position, but the coordinates are not taken over in the text field.

The part for Maps now looks like this

PHP Code:

	<div id="resrev_geo"></div>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV6idN9c2CDDaF5NT6l7JropM2slaPqWWw&callback=initMap">
  </script>
<script type="text/javascript">
	 // 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);
	document.getElementsByName("xthreads_resrev_geo")[0].value = '('+position.coords.latitude+', '+position.coords.longitude+')';

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

***RateU*** · 06-22-2020 04:47 AM

You have the resrev_geo input field, right?
Remove other codes than your codes first.

Edit:
I've tried it. Even though the maps not displayed for me (I don't have the API Key), but after allowing the browser to detect my location, the textbox (resrev_geo) captures the coordinate.

Lordikon30 · 10-25-2021 04:06 AM

Hello
What has to be removed in order not to use the entire Google API and the map. I just want to have one line where the address can be entered as plain text.

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