Use Google Place Search API to tag a location

[abdfahim]

It would be cool if, with every photo, the user can tag the geolocation using the Google Place Search API

Place Search | Places API | Google for Developers

developers.google.com

Right now I use a custom field to tag a location, but that causes unavoidable issues such as misspelling etc.

 

[frm]

I created a template autofill_address to auto-fill certain custom fields.

<script>
function initMap() {
    var input = document.getElementsByClassName('custom_address')[0];

    var options = {
        types:  [ "geocode" , "establishment" ],
    };
   
    var autocomplete = new google.maps.places.Autocomplete(input, options);

    autocomplete.addListener('place_changed', function() {
        var place = autocomplete.getPlace();
       
        document.getElementsByClassName('custom_gps_coordinates')[0].value = [place.geometry.location.lat(), place.geometry.location.lng()].join(',');
    });
}
</script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&amp;libraries=places&callback=initMap"></script>

Adding that to the template by using <xf:include template="autofill_address" /> to forum_post_thread and post_edit along with the custom thread fields "custom_address" and custom_gps_coordinates will do two things: 1) Auto-complete the address as it's being typed; and, 2) add the GPS coordinates of that location. While the second isn't necessary, I keep it as a failsafe, and, it allows for people to input the GPS coords without the address as not everything is in Places.

I then create a custom field to display the coords/map with what was added.

 

[abdfahim]

Awesome, I'll try that. Thanks a lot.

 

[frm]

I just realized that you want it with a photo. Very doable with XFMG custom media fields and different template edits.

 

[abdfahim]

Yes, I think I can figure that out.

 

[frm]

Awesome, I'll try that. Thanks a lot.

Let me know if you need any help. I hacked a lot of JavaScript code out of the template that reduced it to a certain location and rectangular boundary (so people can't tag places in France, etc., when I know they can only be all in one 400 sqkm box).

 

[frm]

And special thanks for @DragonByte Tech and @Chris D for assisting me with being able to accomplish it on my own by pointing out my stupidity of a missing equal sign and edumacating me on getElementsByClassName.