Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 Restaurant Review
lenox Offline
Junior Member
**
Posts: 15
Joined: Mar 2018
Post: #41
RE: Restaurant Review
Hi
is there a way to use the Geolocation API https://developers.google.com/maps/docum...eolocation 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
  <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

06-17-2020 02:22 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,349
Joined: Mar 2010
Post: #42
RE: Restaurant Review
(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.

06-21-2020 06:01 AM
Find all posts by this user Quote this message in a reply
lenox Offline
Junior Member
**
Posts: 15
Joined: Mar 2018
Post: #43
RE: Restaurant Review
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.

   
06-21-2020 11:15 PM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,349
Joined: Mar 2010
Post: #44
RE: Restaurant Review
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).


06-22-2020 01:11 AM
Find all posts by this user Quote this message in a reply
lenox Offline
Junior Member
**
Posts: 15
Joined: Mar 2018
Post: #45
RE: Restaurant Review
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
	<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>	

06-22-2020 04:43 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,349
Joined: Mar 2010
Post: #46
RE: Restaurant Review
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.

(This post was last modified: 06-22-2020 04:56 AM by RateU.)
06-22-2020 04:47 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: