Powered by Google Map API

Lounge
1

Test page: https://selectsolarpros.com/test/

I’m trying to setup a form using the “Powered by Google” address/map API. I have setup and enable the API, and followed this guys instructions (apparently not to a tee).

Page should work like this:
Screen Shot 2020-09-11 at 9.59.54 PM

I can’t get the page to work. Any suggestions? I’m happy to pay someone that can send me over a working file in html and/or foundation form. I really need to get this off my desk as I have spent way too many hours trying to figure this out.

I’m using an HTML page in RW and the Blank theme from Joe Workman. My plan is to get this working correctly using strictly code, then see if I can get this to work in a Foundation form.

2

What happens when you implement the jQuery and javascript dependencies prescribed by the tutorial?

3

Nothing really happens.

4

Let me put it another way, when I looked at your page earlier today you had not implemented the JavaScript and jQuery which the tutorial references. Your page was missing those dependencies, hence why it’s not working.

I think what you have done is maybe signed up for a maps api key and magically expected that to make the connection between your HTML page and the maps api. Have another read through of the tutorial and see if what I’m saying ( and the post below ) makes more sense.

5

Looks like for one thing you are using a very old version of jQuery ( v1.7.2).

I don’t see any of the code the example gives
No Maps API :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=Your_API_Key"></script>

None of the JavaScript code:

var searchInput = 'search_input';

$(document).ready(function () {
    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
        types: ['geocode'],
    });
	
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var near_place = autocomplete.getPlace();
        document.getElementById('loc_lat').value = near_place.geometry.location.lat();
        document.getElementById('loc_long').value = near_place.geometry.location.lng();
		
        document.getElementById('latitude_view').innerHTML = near_place.geometry.location.lat();
        document.getElementById('longitude_view').innerHTML = near_place.geometry.location.lng();
    });
});

or this code that Remove latitude & longitude on changing the input field value using jQuery.:

$(document).on('change', '#'+searchInput, function () {
    document.getElementById('latitude_input').value = '';
    document.getElementById('longitude_input').value = '';
	
    document.getElementById('latitude_view').innerHTML = '';
    document.getElementById('longitude_view').innerHTML = '';
});

Looks like the only thing there from the article is the HTML code.

6

I put all that code in the Head section of the RW file (mine has my API Key). I removed my key to take the screenshot. I believe in his video he was writing all that in the head section of his site. Should I have put this in the Javascript section of my RW project?

Screen Shot 2020-09-12 at 1.48.39 PM
Screen Shot 2020-09-12 at 1.48.39 PM1097×602 113 KB

7

On thepublished site the head section looks to be empty:

2020-09-12_14-15-00
2020-09-12_14-15-00723×266 31.9 KB

Make sure you have the Apply Theme box checked on the HTML page.

2020-09-12_14-16-09

8

Thank you, I’ve never even seen that button (ticked it and republished).

9

Now I see a head section without much in it (none of the code you show above):

2020-09-12_14-25-17
2020-09-12_14-25-171019×175 35.2 KB

I don’t think that theme is doing the inserting of code.

Try instacks Void theme:

Or ThemeFlood’s blank theme:

10

Thanks @teefers, that changed something. I’ll read through the Google page now.