1

My component has the functionality to load google map (Maps API version 3 with valid API key).

My infowindow above the marker stops working. One week back everything was smooth and working good.

Here is the code:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<API-KEY>&sensor=false"></script>
<script type="text/javascript">
map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_TOP
        }
    });

var marker = new google.maps.Marker({
                        map: map,
                        draggable:true,
                        position: results[0].geometry.location
                    });

var infowindow = new google.maps.InfoWindow();
infowindow.setContent("Lorem Ipsum");
infowindow.open(map, marker); // On this line the problem is occurring
</script>

After investigating I noticed that it is not working due to mootools.js (version: 1.11) file. I cannot remove mootools files as it is breaking the default behaviour of the joomla.

The google map infowindow is working fine when I moved my code to non joomla project.

Below is the error which I am getting in the console log. Sharing first 2 lines of the error because it is big and it contains the API key.

Uncaught (in promise) Object { message: "View: element invalid: not an instance of Element", name: "InvalidValueError", stack: "ie@https://maps.googleapis.com/maps/api/js?key=......etc

Any help is very much appreciated. Thanks

Improve this question
3
  • Yikes. Joomla1.5! Say it ain't so. My sympathies.
    – mickmackusa
    Mar 31, 2021 at 22:28
  • How are map and marker being defined? Can you share the code for that?
    – Lodder
    Apr 1, 2021 at 5:33
  • Hi Lodder, I have updated my post to add code. Also shared complete code on githup (github.com/vbdeveloper1986/google_map). The code is working after commenting mootools_unminify.js script. Thanks!
    – Vallabh Bothre
    Apr 1, 2021 at 6:16

1 Answer 1

Reset to default
1

For this to work, MooTools needs to be loaded first, then jQuery (if this is being used) and Google Maps needs to be loaded last.

You can sometimes force MooTools to load first by adding this line high up in the <head> section of the template index.php file:

JHTML::_('behavior.framework', true);

Alternatively, download, install and enable the Joomla 1.5 version of jQuery Easy, set the plugin parameters so jQuery is not enabled, set up the advanced settings so that the MooTools script is stripped and then add the required scripts in the "Add Scripts" section so they load in the correct order (MooTools, then jQuery if this is being used and then Google Maps).

Improve this answer
1
  • 1
    Hi Neil, Thanks for your response. I created separate standalone file in which I included joomla mootools js file. Sharing code on githup (github.com/vbdeveloper1986/google_map). The code is working after commenting mootools_unminify.js script. There is something wrong in the mootools which is conflicting. Thanks!
    – Vallabh Bothre
    Apr 9, 2021 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.