JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
CSS
#map
{
height: 83%;
width: 100%;
position: absolute;
left: 0px;
top:65px;
z-index: 0;
margin: 0;
padding: 0;
}
JavaScript
initMap();
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 51.1500, lng: -1.000},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var bounds = new google.maps.LatLngBounds();
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://imgur.com/3PFbvd1',
map: map,
position: new google.maps.LatLng(51.3700, -2.3800)
});
bounds.extend(marker.getPosition());
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://imgur.com/dc2Sq4r',
map: map,
position: new google.maps.LatLng(52.1600, 0.1080)
});
bounds.extend(marker.getPosition());
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'Styles/images/ic_car.png',
map: map,
position: new google.maps.LatLng(51.7200, -0.2800)
});
bounds.extend(marker.getPosition());
/*var flightPlanCoordinates = [
{lat: 51.3610, lng: -2.300},
{lat: 51.2680, lng: 0.464}
];*/
var flightPlanCoordinates = [
{lat: 51.3740, lng: -2.300},
{lat: 51.3510, lng: -1.1640},
{lat: 51.1600, lng: -1.0000},
{lat: 51.8950, lng: -0.5000}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#00298B',
strokeOpacity: 1.0,
strokeWeight: 3
});
flightPath.setMap(map);
for (var i=0; i<flightPlanCoordinates.length; i++) {
bounds.extend(new google.maps.LatLng(flightPlanCoordinates[i].lat, flightPlanCoordinates[i].lng));
}
map.fitBounds(bounds);
}