In my project I am plotting the waypoints in the map through Google Map API it was working fine a few days ago but now it's only displaying the markers and route but not showing the map instead of that it's showing gray background.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
if(module=='Vehicles'){
var x = '<div id="mapdiv" style="width:100%;height:600px;margin-bottom: 10px;"></div>';
var v1 = jQuery("#Vehicles_editView_fieldName_cf_1309").val();
var v2 = jQuery("#Vehicles_editView_fieldName_vehicle_name").val();
var v3 = jQuery("#Vehicles_editView_fieldName_vehicle_number").val();
if(v1!="" && v1.includes(", "))
{
jQuery("body").append(x);
var v = v1.split(", ");
var l1=v[0];
var l2=v[1];
var myLatLng1 = new google.maps.LatLng(l1, l2);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
function bindInfoWindow(marker, map, infowindow, html) {
marker.addListener('mouseover', function() {
infowindow.setContent(html);
infowindow.open(map, this);
});
}
function bindInfoWindow2(marker, map, infowindow) {
marker.addListener('mouseout', function() {
infowindow.close(map, this);
});
}
const map = new google.maps.Map(document.getElementById("mapdiv"), {
zoom: 18,
center: myLatLng1,
});
var marker = new google.maps.Marker({
position: myLatLng1,
map,
icon: siteurl + 'uploaded_files/vehicle_marker.png'
});
//extend the bounds to include each marker's position
bounds.extend(marker.position);
var x = '<h4 style="text-align:left;font-size:10px;font-weight:bold">Vehicle Name: <span style="font-weight:300">'+v2+'</span></h4><h4 style="text-align:left;font-size:10px;font-weight:bold">Vehicle No.: <span style="font-weight:300">'+v3+'</span></h4>';
bindInfoWindow(marker, map, infowindow, x);
bindInfoWindow2(marker, map, infowindow);
}
}
})
</script>
</body>
</html>
It was working recently but now it's not showing the map only showing markers and route tried to debug but didn't catch the actual issue.
Map showing only marker but the map background is gray no tiles are showing.
In inspect element one of errors is coming
400 bad requests.
Invalid JSON payload received. Unexpected token.__vtrftk=sid:a45953c^
but I am not sending any of the tokens I provide only the waypoints in the function.
It was working perfectly from all locations in the server, but now only when I ran a test file in my server root it's working perfectly
choose for a specific Google Maps API script (version 3.53) with your API key. Something like this..
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&?v=3.53&key=YOURAPIKEY&sensor=true">
This ensures that your webpage will always use the specified version.