JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<div id="map-canvas"></div>
CSS
html, body, #map-canvas { height: 100%; margin: 0; padding: 0 }
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
JavaScript
function initialize() {
var direction = new google.maps.LatLng(52.376423, 4.887234);
var station = new google.maps.LatLng(52.375401, 5.218824);
var mapProperties = {
center: direction,
zoom: 19
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: false,
title: "test"
});
directionMarker.setIcon(({
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 6
}));
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
}
initialize();