JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>
JavaScript
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(20, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
};
var shadow = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
size: new google.maps.Size(37, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(62.457171, 17.350953),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
setTimeout(function () {
loadData();
},500);
function loadData()
{
//alert("Loading");
var marker, i;
var url = "http://blackcab.didair.se/api/drivers";
var name;
var lat;
var lon;
var locations;
$.getJSON(url, function (response) {handleData(response)});
}
function handleData(response)
{
//alert(response);
var n;
for(n=0; n<response.drivers.length; n++)
{
name = response.drivers[n].name;
//alert(name);
lat = response.drivers[n].currentLat;
lon = response.drivers[n].currentLon;
var myLatLng = new google.maps.LatLng(lat,lon);
var marker = new google.maps.Marker({
position: myLatLng,
shadow: shadow,
icon:image,
map: map,
title: name,
zIndex: 1
});
}
}