Seeking assistance with Google Maps API integration

You'll need to set up your Google Maps API account, and you need the mapping and geocoding functions.  Once that's done, it's fairly simple implementation.  Here is an example on using the API to drop the map in a <div>, you can use the documentation to look at the additional mapOptions.

Pass in the Address you want to find, then the target <div> element (with an id).

    mapLoad: function (address, mapDiv) {
        var mapOptions = {
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            disableDefaultUI: true,
            gestureHandling: 'none',
            zoomControl: false
        };
        geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == 'OK') {
                console.log(results);
                map = new google.maps.Map(document.getElementById(mapDiv.id),mapOptions);
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert('Unable to connect to Google Maps');
            }
        });
    }

Select allOpen in new window

You also need to drop in your API key into the page:

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>

Select allOpen in new window

Since the key is exposed,in the API console you will need to set some CORS restrictions (IP, referrer URL, etc.)

Dustin - thanks so much for your reply.  I see now that Google now charges for access to their Maps API .. which was a bit of a disappointment and has stalled me temporarily, unfortunately.  

https://developers.google.com/maps/documentation/javascript/usage-and-billing

Still .. I just have a few questions regarding the code example you've provided.  

1) How exactly do I call the mapLoad method?  More specifically, how would I load up a map that has multiple different locations plotted on the map?  I'm guessing it'd be something like the following, but I'm honestly not sure.

mapLoad("1600 Pennsylvania Avenue NW Washington, DC 20500","myDiv");
mapLoad("555 Pennsylvania Avenue NW Washington, DC 20500","myDiv");

Select allOpen in new window

2) Aside from dropping in the JS library & API key in the page, .. are there any other bits of JavaScript that need to be added?

3) Does this code example handle popup previews and filtering capabilities, etc?  If not, could you perhaps steer me to where I might find some online documentation pertaining to this?

Thanks again!
- Yvan

Dustin - thank you so much!  I figured out how the whole free tier thing works, and also started getting a handle on all of the possibilities by reviewing the documentation.  

Cheers,
- Yvan