Been racking my head, I have a script in main.js that only is used on the contact page. I have conditionally enqueued the JS file that will also be used for the JS in main.js. I can see the scripts in the source, yet the functionality isnโt working if I keep the conditional enqueue.
I can remove the conditional wp_enqueue in lib/scripts.js for the particular script needed on the contact page. Things all work fine now but the script loads on every page of the site which I donโt want.
Going back to just loading the script on the contact page and nothing works.
The script is loading in the footer under scripts.js but nothing works. If I remove the conditional the script loads in the footer (exactly as before) yet everything works.
if (is_page('contact')) {
wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?sensor=false', array('jquery','roots_scripts'), null, true);
wp_enqueue_script('googlemaps');
}
The main.js function that I am conditionally calling for only Contact page, this works fine but only if I wp_enqueue the above script WITHOUT the condition.
contact: {
init: function() {
// JavaScript to be fired on the contact page
// Google Maps
var markergeo = new google.maps.LatLng(49.27430, -123.12484);
var customicon = 'http://dev.wdtravel.com/raw-html/img/icon-googlemap.png';
var zoommap = 14;
function initialize() {
var mapOptions = {
zoom: zoommap,
center: markergeo
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: markergeo,
icon: customicon,
draggable: false,
animation: google.maps.Animation.DROP,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
// //end -----------------
}
},