Adding External Gmap JS to WordPress

Question

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',
        'https://maps.googleapis.com/maps/api/js?key=APIKEY&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="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap&libraries=geometry"></script>

    <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/39/6/intl/en_gb/common.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/39/6/intl/en_gb/util.js"></script>
    <!-- all the other stuff -->
</head>
<body>
    <!-- rest of code -->
    <!--#site-footer-->
    <script src="http://dev.wp.local/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="https://maps.googleapis.com/maps/api/js?key=APIKEY&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.spherical.computeDistanceBetween(
        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

0
, , treyBake 2 years 2020-01-16T08:38:25-05:00 0 Answers 79 views 0

Leave an answer

Browse
Browse