Google Maps dynamic markers not in correct position - Lat and Long is accurate

Question

Using the Google Maps API I'm dynamically adding map markers to track 2 of our vehicles.The website is written in asp.net c# mvc with bootstrap 4.3.1, using an ajax request to grab the latest marker location from the vehicle tracker API that we use. Map markers are updated every 5 minutes to show the current location.

When running the application in localhost and on one of our internal servers the markers display exactly where they should. Now that I've uploaded the website to an external web server I've noticed that the map markers are not accurate and are always in an incorrect position.

I have a screen shot which shows the marker being inspected in dev tools and you can see the position where the marker is supposed to be.

See marker and ghost position on screenshot

I've checked the data for the markers and all seems to be fine on that front, after inspecting the code in dev tools it seems like the markers are being pushed down and right by the CSS but I can't seem to find and deselect any classes which affect the marker position.

I've managed to replicate the issue in a JSFiddle here, the location data has been hard coded for this demo;

https://jsfiddle.net/znqo5xaL/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
        <div id="map"></div>
        <script>
            var locs;
            var markersArray = [];
            var map;

            function initMap() {
                locs = [{"lat":"53,5658418","lng":"-0,8491593","distanceList":null},{"lat":"52,8815088","lng":"-2,1409461","distanceList":null}];

                map = new google.maps.Map(
                    document.getElementById('map'),
                    { center: new google.maps.LatLng(54.113616, -1.607444), zoom: 6 });


                for (var i = 0; i < locs.length; i++) {
                    var marker = new google.maps.Marker({
                        position: {lat: parseFloat(locs[i].lat), lng: parseFloat(locs[i].lng)},
                        animation: google.maps.Animation.DROP,
                        map: map,                                      

                    });
                    markersArray.push(marker);
                };

                window.setInterval(function() {loadMarkers(image, map, markersArray, locs)}, 300000);

            }

            function setMarkers(markersArray, map, locs, image) {

                var locArray;

                $.ajax({

                    url:'../Home/UpdateLoc',
                    dataType: "json",
                    type: "GET",
                    contentType: 'application/json; charset=utf-8',
                    cache: true,
                    success: function (data) {

                        locArray = data.locArray;

                        for (var i = 0; i < locArray.length; i++) {
                            var marker = new google.maps.Marker({

                                position: {lat: parseFloat(locArray[i].lat), lng: parseFloat(locArray[i].lng)},
                                animation: google.maps.Animation.DROP,
                                map: map

                            });
                            markersArray.push(marker);
                        };
                    },
                    error: function (xhr) {
                        alert('error');
                    }
                });


            }

            function loadMarkers (image, map, markersArray, locs) {

                var tst = markersArray;

                for (var i=0; i< tst.length; i++) {
                    tst[i].setMap(null);
                }
                setMarkers(markersArray, map, locs, image);
            }

        </script>


        <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>

    </div>

You can see that when you search for the location: 53.5658418, 0.8491593 on Google maps it is in a different position as to what is shown on my map

The marker location shown on Google maps using the co-ordinates above is where my marker should be displayed.

What could be causing this issue?

evan · Answer 1 · 2019-11-08T11:17:11.467

It looks like this inaccuracy is because you are using parseFloat to parse comma-separated strings. Please refer to this thread Javascript parse float is ignoring the decimals after my comma

Try logging this out:

 console.log("Commas: " + parseFloat(locs[i].lat) + ", " + parseFloat(locs[i].lng));
 console.log("Dots: " + parseFloat(locs[i].lat.replace(',', '.')) + ", " + parseFloat(locs[i].lng.replace(',', '.')));

You'll see the different coordinates in the output:

Commas: 53, 0
Dots: 53.5658418, -0.8491593
Commas: 52, -2
Dots: 52.8815088, -2.1409461

A quick fix is to replace the commas with decimal points using replace as shown in the above code, so the marker's position is set as follows:

var marker = new google.maps.Marker({
     position: {
        lat: parseFloat(locs[i].lat.replace(',', '.')),
        lng: parseFloat(locs[i].lng.replace(',', '.')),
     },
     ...
});

Hope this helps!

Google Maps dynamic markers not in correct position - Lat and Long is accurate

1 Answers1