Maps JavaScript API fails to function properly in Firefox browser

Other Questions API
1

I’m working with a location picker script that sends coordinates to a backend database. The application runs perfectly in Chrome and Internet Explorer, but Firefox causes issues. When I click the save button in Firefox, it just reloads the page instead of saving the coordinates. I’m not very experienced with JavaScript debugging, so any help would be great!

My Code:

<!DOCTYPE html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Location Picker Map</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript">
        var mapMarker;
        var popup;

        function initMap() {
            var coords = new google.maps.LatLng(40.7128, -74.0060);
            var mapSettings = {
                zoom: 2,
                center: coords,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var myMap = new google.maps.Map(document.getElementById('mapContainer'), mapSettings);
            var popupContent = "<div><input type='button' value='Store Position' onclick='storeCoordinates(), window.parent.location.reload();'/></div>";
            popup = new google.maps.InfoWindow({
                content: popupContent
            });

            function placeMarker(pos) {
                if (!mapMarker) {
                    mapMarker = new google.maps.Marker({
                        position: pos,
                        map: myMap
                    });
                }
                else { mapMarker.setPosition(pos); }
            }

            google.maps.event.addListener(myMap, 'click', function(e) {
                placeMarker(e.latLng);
                google.maps.event.addListener(mapMarker, 'click', function() {
                    popup.open(myMap, mapMarker);
                });
            });
        }

        function storeCoordinates() {
            var position = mapMarker.getPosition();
            var endpoint = 'save_coordinates.php?latitude=' + position.lat() + '&longitude=' + position.lng();
            fetchData(endpoint, function(response, status) {
                if (status == 200 && response.length >= 1) {
                    popup.close();
                }
            });
        }

        function fetchData(endpoint, callback) {
            var xhr = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    xhr.onreadystatechange = emptyFunction;
                    callback(xhr.responseText, xhr.status);
                }
            };

            xhr.open('GET', endpoint, true);
            xhr.send(null);
        }

        function emptyFunction() {}
    </script>
</head>
<body style="margin:0px; padding:0px;" onload="initMap()">
    <div id="mapContainer" style="width: 100%; height: 800px"></div>
    <div id="status"></div>
</body>
</html>
2

That reload issue is classic Firefox timing problems. Skip the manual AJAX calls and event handling - just automate the whole thing.

I’ve built similar location capture systems at work. Let automation handle browser differences instead of writing custom JavaScript for each one.

Set up a workflow that grabs map click coordinates automatically and sends them to your backend. No manual event wiring needed. Trigger coordinate saving on map clicks and the response flow works seamlessly everywhere.

Automation means you don’t debug Firefox timing or worry about XMLHttpRequest compatibility. It handles HTTP requests reliably no matter what browser.

Location picker workflows are perfect for automation tools - they manage data flow between frontend clicks and backend storage without fighting onclick handlers or browser quirks.

Your current code has too many pieces that break differently everywhere. Automation kills those headaches.

3

Had the same browser headaches with Google Maps. The problem’s those simultaneous function calls in your onclick - Firefox processes the page reload before your AJAX finishes, killing the whole thing. Besides fixing the timing, check if your PHP script’s actually getting the coordinates. Firefox handles URL encoding differently than Chrome sometimes. Log the incoming parameters in save_coordinates.php to see what’s coming through. That old ActiveX fallback for XMLHttpRequest is breaking things in modern browsers. Firefox doesn’t need it and it messes with proper requests. Just use new XMLHttpRequest() directly. For debugging, Firefox Developer Tools are solid. The Network tab shows exactly when requests get cancelled or fail - would’ve caught this reload issue right away.

4

firefox can be finicky with event handling. add event.preventDefault() at the top of your storeCoordinates function to block the default button behavior. also, ditch that activeX check - it’s outdated. just use new XMLHttpRequest() directly.

5

I’ve hit this Firefox issue before. Your onclick handler calls both storeCoordinates() and window.parent.location.reload() at the same time. Firefox reloads faster than your AJAX request can finish.

Quick fix - remove the reload from onclick and handle it in your callback:

var popupContent = "<div><input type='button' value='Store Position' onclick='storeCoordinates();'/></div>";

Then update your storeCoordinates callback:

fetchData(endpoint, function(response, status) {
    if (status == 200 && response.length >= 1) {
        popup.close();
        // Add reload here if you need it
        // window.parent.location.reload();
    }
});

Btw, that ActiveX code in your fetchData function isn’t needed anymore. Modern browsers handle XMLHttpRequest fine without the fallback.

For debugging JavaScript across browsers, this covers the basics:

Hit F12 in Firefox and check the Network and Console tabs while testing. You’ll probably see the request getting cancelled when the page reloads.