0

I have a piece of code in a component that I am building that loads maps in a tab in the admin view. The code works perfectly on the admin side, but when I attempt to add frontend editing, it's crashing, with a call to a member function addScript() on null.

In the code I have attempted adding JFactory::getDocument();, which removes the error, but the script fails to load the maps. I've also thought that perhaps jQuery for some reason isn't loading, so have tried adding the JHtml::_('behavior.framework'); which doesn't change anything.

Google Maps is throwing frontend errors of Uncaught TypeError: Cannot read property 'value' of null.

Here's the sample code that is failing

// (start) Section to initiate google map
<?php

if($componentParams['map_provider'] == '1'): 
    $doc->addScript('https://maps.googleapis.com/maps/api/js?key=' . $componentParams['gmapsapi'] );
    $doc->addScript(JURI::base().'components/com_mostwantedrealestate/assets/js/googlemap.js');
?>
var mapTabClicked = false;
jQuery(document).ready(function (){
    jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        mapTabClicked = true;
        var liText = jQuery(this).text();
        if(liText == 'Map Details')
        {
            var lat = document.getElementById("jform_latitude").value;
            var long = document.getElementById("jform_longitude").value;
            initialize(lat, long);
            var center = map.getCenter();
            google.maps.event.trigger(map, 'resize');
            map.setCenter(center);        
        }

    });

});

<?php endif; ?>
// (end) Section to initiate google map

Any thoughts on what I might be missing to get this to work in the frontend and the backend?

Here are 2 screenshots:

Backend Frontend

  • To load jQuery, you need to use jquery.framework instead of behavior.framework – Lodder Sep 23 '17 at 10:58
  • And are you getting any errors in your browser console? – Lodder Sep 23 '17 at 10:59
  • Uncaught TypeError: Cannot read property 'value' of null at initialize (googlemap.js:63) It goes on from there, but I can't post the entire error. – Steve Voorhees Sep 23 '17 at 20:11
  • Can you please format the code in your question so it's readable. Thanks – Lodder Sep 23 '17 at 20:13
  • 1
    Glad you found the issue. Would you mind adding it as a proper answer below and marking it as accepted when possible? – Lodder Sep 24 '17 at 2:10

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.