JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div id="map"></div>
<script>
var locs;
var markersArray = [];
var map;
function initMap() {
locs = [{"reg":"T28GBA","lat":"53,5658418","lng":"-0,8491593","distanceList":null},{"reg":"T27GBA","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 });
var iconBase =
'../Content/';
var image = {
url: '../Content/ted.png',
size: new google.maps.Size(32, 32),
};
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,
title: locs[i].reg
});
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:...
CSS
#map{
height:700px;
/*height: 100%;*/
width: 100vw;
overflow: hidden;
z-index: 0;
top: 0;
left: 0;
position: fixed;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}