admin管理员组文章数量:1404569
I had some working javascript code that I wanted to move out of the template file and put into a .js file.
I moved the code into a front.js file, where some pre-existing javascript lives.
Now I'm trying to add the Google Maps API javascript file like so:
/**
* load css/js into frontend pages
*/
function eng_dealer_map_css_js()
{
# removed CSS as is irrelevant
# add js
wp_register_script(
'eng_dm_front',
plugins_url('pub/js/front.js', __FILE__),
['gmap'],
null,
true
);
wp_register_script(
'gmap',
';callback=initMap&libraries=geometry',
[],
null,
null
);
# register js
wp_enqueue_script('eng_dm_front');
wp_enqueue_script('gmap');
}
# actions
add_action('wp_enqueue_scripts', 'eng_dealer_map_css_js');
Now, refreshing the page gets this error in console (without ref file or line number):
uncaught exception: Object
Which isn't the expected behaviour. I'd hope to separate the JS and call the Google Maps API via WP but it seems to not like it that way.
I then inspected the DOM, which shows this:
<head>
<!-- all the other stuff -->
<script src=";callback=initMap&libraries=geometry"></script>
<script type="text/javascript" charset="UTF-8" src=".js"></script>
<script type="text/javascript" charset="UTF-8" src=".js"></script>
<!-- all the other stuff -->
</head>
<body>
<!-- rest of code -->
<!--#site-footer-->
<script src="/wp-content/plugins/myplugin/pub/js/front.js"></script>
</body>
It looks like it loads in the correct order, but for whatever reason, it doesn't work when my google maps javascript is in the front.js file and everything is loaded this way. It works when I do it like this:
<!-- rest of template code -->
<script async defer
src=";callback=initMap&libraries=geometry"></script>
<script>
//my maps JS
</script>
How do I import the Google Maps API javascript file and make use of it in my own scripts?
Edit: front.js
//google map stuff
let map;
function calcDistance(lat1, lng1, lat2, lng2)
{
return convertToMiles(google.maps.geometry.sphericalputeDistanceBetween(
new google.maps.LatLng(lat1, lng1),
new google.maps.LatLng(lat2, lng2)
))
}
function displayRoute(a, b)
{
let start = new google.maps.LatLng(a.lat, a.lng),
end = new google.maps.LatLng(b.lat, b.lng),
directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
directionsDisplay.setMap(map); // map should be already initialized.
let request = {origin : start, destination : end, travelMode : google.maps.TravelMode.DRIVING},
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response)
}
})
}
function convertToMiles(i)
{
return i*0.000621371192
}
function initMap(addr)
{
let point = new google.maps.LatLng(50.833206,-0.223977),
search = 0;
addr = addr || 0;
if (addr !== 0) {
addr = JSON.parse(addr);
point = new google.maps.LatLng(addr[0].lat, addr[0].lng);
search = addr[0];
}
map = new google.maps.Map(document.getElementById('dealer-map'), {
zoom: 5,
center: point
});
let infowin = new google.maps.InfoWindow;
$.ajax({
type: 'get',
url: '/path/to/file.json',
success: function(res)
{
create_markers(map, infowin, res, search)
},
error: function(res)
{
console.log(res)
}
})
}
function add_conversion()
{
console.log(this);
let id = this.dataset.id;
console.log(id);
}
function create_markers(map, infoWin, dealers, search)
{
for (const [key, el] of Object.entries(dealers))
{
if (search != 0) {
let dist = calcDistance(el.lat, el.lng, search.lat, search.lng).toFixed(2);
$('.distance[data-id="'+ el.id +'"]').text(dist+ 'mi');
$('.dealer[data-id="'+ el.id +'"]').append(
'<div class="col-sm-12">' +
' <button type="button"' +
' class="directions-btn"' +
' data-lat="'+ el.lat +'"' +
' data-lng="'+ el.lng +'"' +
' data-ulat="'+ search.lat +'"' +
' data-ulng="'+ search.lng +'">' +
' <span>Directions</span>' +
' </button>' +
'</div>'
)
} else {
$('.dealer[data-id="'+ el.id +'"]').find('.directions-btn').parent().remove()
}
// marker props
let www = el.www;
let marker = new google.maps.Marker({
map: map,
icon: el.icon,
position: new google.maps.LatLng(parseFloat(el.lat), parseFloat(el.lng))
});
// create html
let infwindow = document.createElement('div'),
h = document.createElement('p'),
p = document.createElement('p'),
a = document.createElement('a'),
btn = document.createElement('a'),
br = document.createElement('br');
h.textContent = el.name;
h.style = 'font-weight: 700';
p.textContent = el.address;
if (www.length > 0) {
a.textContent = www;
a.href = www;
a.target = '_blank';
}
btn.textContent = 'click to contact';
btn.href = 'javascript:add_conversion()';
btn.classList.add('btn', 'btn-primary');
btn.dataset.id = el.id;
btn.dataset.email = el.email;
infwindow.appendChild(h);
infwindow.appendChild(p);
if (www.length > 0) {
infwindow.appendChild(a);
}
if (is_mob()) {
let tel = document.createElement('a');
//tel.href = 'tel:'+ el.tel;
tel.href = 'tel:01232141324';
tel.target = '_blank';
tel.textContent = 'Call';
infwindow.appendChild(tel)
}
infwindow.appendChild(br);
infwindow.appendChild(br);
infwindow.appendChild(btn);
marker.addListener('click', function()
{
infoWin.setContent(infwindow);
infoWin.open(map, marker)
})
}
}
Above wrapped in
jQuery(document).ready(function($){
})
have also tried to put outside the .ready() and same error
本文标签： plugin developmentAdding External Gmap JS to WordPress
版权声明：本文标题：plugin development - Adding External Gmap JS to WordPress 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744830989a2627346.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论