JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
CSS
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
JavaScript
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true
});
directionsDisplay.setMap(map);
startAddress = "200 cunnery rd";
var start = startAddress;
var end = new google.maps.LatLng(52.51291105868078, -2.7605353326797513);
var request = {
origin: start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
function wrapper (callback) {
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
if(this.marker){
this.marker.setPosition(response.routes[0].overview_path[response.routes[0].overview_path.length-1]);
} else{
this.marker = new google.maps.Marker({
position: response.routes[0].overview_path[response.routes[0].overview_path.length-1],
map: map
});
}
if(!this.infoWindow){
this.infoWindow = new google.maps.InfoWindow({
content: "Hello"
});
} else {
this.infowindow.setContent(contentString);
}
this.infoWindow.open(map, this.marker);
//////
// SET TIMEOUT
// desired result works with setTimeout
// Uncomment to see
//setTimeout(function() { map.setCenter(this.marker.getPosition()) }, 2000);
//alert("in fn");
///////
// Callback here
callback(this.marker.getPosition());
}
});
}
//////
// Call wrapper
wrapper(function (latLng) {
//alert("in...