- #ENQUEUE GOOGLE MAPS SCRIPT HOW TO#
- #ENQUEUE GOOGLE MAPS SCRIPT CODE#
- #ENQUEUE GOOGLE MAPS SCRIPT FREE#
$wptgmap_have_assets_been_enqueued = true Enqueue the Google Maps JS in the footer.Īdd_action('wp_footer', 'wptgmap_page_footer', 99) '/wpt-google-map/wpt-google-maps.js', null, $version) Enqueue our frontend JavaScript and set the wptgmapData to hold '/wpt-google-map/wpt-google-maps.css', null, $version, 'all') Back in your child theme’s main folder, create new filed called “ wpt-google-map.php” and paste the following into it. In here, create two empty files, called “wpt-google-maps.css” and “wpt-google-maps.js”. Go to your custom child theme’s main folder and create a new folder called “wpt-google-map”. The only fiddly bit is adding the map markers, as we need to do some to-ing and fro-ing with the Google Places API, but we’ll get the basic maps working first.
#ENQUEUE GOOGLE MAPS SCRIPT CODE#
We’ll put our JS and CSS in separate asset files, and we’ll hook WordPress’ wp_footer action to inject the Maps JavaScript script element at the end of the page. Ive created an option tab with Advanced Custom fields where you can paste your Google Maps API key, so I dont have to put the API key in the code over and over again when starting a new project. We’re going to create a shortcode that’ll output a div element, with the data-map="." property holding the parameters of the map. The dependency can't be satisfied so the script isn't loaded. Instead of passing in an empty array to specify no dependencies for the script, the array contains a blank string. Starting our callback : wptgmapInitMaps()') ĭocument.querySelectorAll('.map').forEach(function(container) " property as JSON. I suspect the issue is due to the dependency that has been set for googlemaps. You can rate examples to help us improve the quality of examples. These are the top rated real world PHP examples of etpbenqueuegooglemapsscript extracted from open source projects. Disable this option to remove the Google Maps API script from your Divi Builder Pages. PHP etpbenqueuegooglemapsscript - 3 examples found. This will enable Google Fonts for Non-English languages.
#ENQUEUE GOOGLE MAPS SCRIPT FREE#
Google Fonts is a free font service that provides over a thousand free fonts.
Here’s a rough outline of how the HTML will look: Ĭonsole.log('Maps API loaded. Enable this option if you want to be able to use Google Fonts on your website. When your JavaScript function is called, use the Google JS to initialise your map div element(s).The URL should contain the name of a function in your page’s JavaScript, which will get called when the Google script has finished loading, e.g. At the end of the HTML, add a script element that pulls in the Google Maps JS.We’re going to use a CSS class to do this, so we can select all the maps on a page with a single query. This is just a div that can be identified with a CSS selector. Create an HTML element on your page that will act as a “container” element for the maps.
#ENQUEUE GOOGLE MAPS SCRIPT HOW TO#
The Google documentation for the Maps JavaScript API outlines how to get a map into your page, and the process works like this: It might be worth diving into the Google Maps API to see if they emit any kind of loaded event we can listen to.Restrict by HTTP Referrer How It’s Going to Work On the other hand, if we don't use the callback technique, we'll need to implement some kind of listener that checks when the API is loaded. If we continue to use this technique, dequeuing the API call will also disable our maps. We are passing an initialize callback to the API as a query var, so that our maps spin up as soon as the API is loaded. This presents a bit of an issue around how the maps are loaded. So they need to be able to dequeue the API script without disabling the map view in our plugin. If another plugin enqueues the Google Maps api as well, this can cause conflicts, for example with Modern Tribe's Events Calendar plugin. This improves page load speed a little bit, but the cost is that it's very difficult to manage conflicts. Right now the plugin injects the Google Maps API script after the page is loaded.
0 kommentar(er)
