I have this script to calculate distance between 2 points on a google map and draw it to the map. But onload the map_canvas is gray. I want to put a fake location on load so the map on load is opened with this center.
<script type="text/javascript">
// $( document ).ready(function() {
var cnt = 1;
var autocomplete = [];
var marker = [];
var markers = [];
var usedIds = [];
var map = null;
var maxNumberOfTextboxAllowed = 5;
var insertTextboxId = [];
google.maps.event.addDomListener(window, 'load', function() {
var places = new google.maps.places.Autocomplete(document.getElementById('source'));
google.maps.event.addListener(places, 'place_changed', function() {
var place = places.getPlace();
var data = {
"LocationName": document.getElementById("source").value,
"lat": place.geometry.location.lat().toString(),
"lng": place.geometry.location.lng().toString()
};
if (markers.length > 0) {
markers.splice(0, 1, data);
} else
markers.splice(0, 0, data); // splice(position, numberOfItemsToRemove, item)
initialize();
});
var places1 = new google.maps.places.Autocomplete(document.getElementById('destination'));
google.maps.event.addListener(places1, 'place_changed', function() {
var place1 = places1.getPlace();
var data = {
"LocationName": document.getElementById("destination").value,
"lat": place1.geometry.location.lat().toString(),
"lng": place1.geometry.location.lng().toString()
}
if (markers.length == 1) {
markers.splice(1, 1, data);
} else if (markers.length > 0)
markers.splice(markers.length - 1, 1, data)
initialize();
});
});
// });
function GenerateSourceDestinationPoint() {
if (cnt <= maxNumberOfTextboxAllowed) {
var fieldWrapper = $("<div class='fieldwrapper' id='field" + cnt + "'/>");
var valueStr;
if (cnt == 1) {
valueStr = "Cardiff, UK";
} else if (cnt == 2) {
valueStr = "Newport, UK";
} else if (cnt == 3) {
valueStr = "Bath, UK";
} else {
valueStr = "";
}
var fName = $("<input type='text' class='fieldname' id='Txtopt" + cnt + "' name='TxtoptNm" + cnt + "' value='" + valueStr + "' />");
fieldWrapper.append(fName);
fieldWrapper.append('<br />');
fieldWrapper.append('<br />');
$("#abc").append(fieldWrapper);
var newInput = [];
var newEl = document.getElementById('Txtopt' + cnt);
var txtboxId = 'Txtopt' + cnt;
newInput.push(newEl);
setupAutocomplete(autocomplete, newInput, 0, txtboxId);
cnt = cnt + 1;
} else
alert("Cant create more than 5 textbox");
}
function setupAutocomplete(autocomplete, inputs, i, txtboxId) {
insertTextboxId.push(txtboxId);
autocomplete.push(new google.maps.places.Autocomplete(inputs[i]));
var idx1 = autocomplete.length - 1;
var idx = markers.length - 1;
markers[idx + 1] = markers[idx];
markers[idx] = {};
google.maps.event.addListener(autocomplete[idx1], 'place_changed', function() {
var pos = idx1 + 1;
var place = autocomplete[idx1].getPlace();
if (!place.geometry) {
return;
}
var autoTextbox = {
"LocationName": document.getElementById(insertTextboxId[idx1]).value,
"lat": autocomplete[idx1].getPlace().geometry.location.lat().toString(),
"lng": autocomplete[idx1].getPlace().geometry.location.lng().toString()
}
markers[idx] = autoTextbox;
initialize();
});
}
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
center: new google.maps.LatLng(parseFloat(markers[0].lat), parseFloat(markers[0].lng)),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#F3443C'
});
var lat_lng = [];
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
bounds.extend(marker.getPosition());
var src, des;
var waypoints = [];
for (var i = 0; i < markers.length; i++) {
if (i === 0) {
src = new google.maps.LatLng(parseFloat(markers[i].lat),
parseFloat(markers[i].lng));
var smarker = new google.maps.Marker({
position: src,
map: map
});
bounds.extend(smarker.getPosition());
} else if (i == markers.length - 1) {
des = new google.maps.LatLng(parseFloat(markers[i].lat),
parseFloat(markers[i].lng));
var dmarker = new google.maps.Marker({
position: des,
map: map
});
bounds.extend(dmarker.getPosition());
} else {
var latlng = new google.maps.LatLng(markers[i].lat, markers[i].lng);
waypoints.push({
location: latlng,
stopover: true
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
}
service.route({
origin: src,
destination: des,
waypoints: waypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
map.fitBounds(bounds);
}
});
}
</script>
Initialize the map in your onload function.
google.maps.event.addDomListener(window, 'load', function() {
var mapOptions = {
center: new google.maps.LatLng(0,0),
zoom: 2
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
code snippet:
var cnt = 1;
var autocomplete = [];
var marker = [];
var markers = [];
var usedIds = [];
var map = null;
var maxNumberOfTextboxAllowed = 5;
var insertTextboxId = [];
google.maps.event.addDomListener(window, 'load', function() {
// initialize map
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var places = new google.maps.places.Autocomplete(document.getElementById('source'));
google.maps.event.addListener(places, 'place_changed', function() {
var place = places.getPlace();
var data = {
"LocationName": document.getElementById("source").value,
"lat": place.geometry.location.lat().toString(),
"lng": place.geometry.location.lng().toString()
};
if (markers.length > 0) {
markers.splice(0, 1, data);
} else
markers.splice(0, 0, data); // splice(position, numberOfItemsToRemove, item)
initialize();
});
var places1 = new google.maps.places.Autocomplete(document.getElementById('destination'));
google.maps.event.addListener(places1, 'place_changed', function() {
var place1 = places1.getPlace();
var data = {
"LocationName": document.getElementById("destination").value,
"lat": place1.geometry.location.lat().toString(),
"lng": place1.geometry.location.lng().toString()
}
if (markers.length == 1) {
markers.splice(1, 1, data);
} else if (markers.length > 0)
markers.splice(markers.length - 1, 1, data)
initialize();
});
});
// });
function GenerateSourceDestinationPoint() {
if (cnt <= maxNumberOfTextboxAllowed) {
var fieldWrapper = $("<div class='fieldwrapper' id='field" + cnt + "'/>");
var valueStr;
if (cnt == 1) {
valueStr = "Cardiff, UK";
} else if (cnt == 2) {
valueStr = "Newport, UK";
} else if (cnt == 3) {
valueStr = "Bath, UK";
} else {
valueStr = "";
}
var fName = $("<input type='text' class='fieldname' id='Txtopt" + cnt + "' name='TxtoptNm" + cnt + "' value='" + valueStr + "' />");
fieldWrapper.append(fName);
fieldWrapper.append('<br />');
fieldWrapper.append('<br />');
$("#abc").append(fieldWrapper);
var newInput = [];
var newEl = document.getElementById('Txtopt' + cnt);
var txtboxId = 'Txtopt' + cnt;
newInput.push(newEl);
setupAutocomplete(autocomplete, newInput, 0, txtboxId);
cnt = cnt + 1;
} else
alert("Cant create more than 5 textbox");
}
function setupAutocomplete(autocomplete, inputs, i, txtboxId) {
insertTextboxId.push(txtboxId);
autocomplete.push(new google.maps.places.Autocomplete(inputs[i]));
var idx1 = autocomplete.length - 1;
var idx = markers.length - 1;
markers[idx + 1] = markers[idx];
markers[idx] = {};
google.maps.event.addListener(autocomplete[idx1], 'place_changed', function() {
var pos = idx1 + 1;
var place = autocomplete[idx1].getPlace();
if (!place.geometry) {
return;
}
var autoTextbox = {
"LocationName": document.getElementById(insertTextboxId[idx1]).value,
"lat": autocomplete[idx1].getPlace().geometry.location.lat().toString(),
"lng": autocomplete[idx1].getPlace().geometry.location.lng().toString()
}
markers[idx] = autoTextbox;
initialize();
});
}
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
center: new google.maps.LatLng(parseFloat(markers[0].lat), parseFloat(markers[0].lng)),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#F3443C'
});
var lat_lng = [];
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
bounds.extend(marker.getPosition());
var src, des;
var waypoints = [];
for (var i = 0; i < markers.length; i++) {
if (i === 0) {
src = new google.maps.LatLng(parseFloat(markers[i].lat),
parseFloat(markers[i].lng));
var smarker = new google.maps.Marker({
position: src,
map: map
});
bounds.extend(smarker.getPosition());
} else if (i == markers.length - 1) {
des = new google.maps.LatLng(parseFloat(markers[i].lat),
parseFloat(markers[i].lng));
var dmarker = new google.maps.Marker({
position: des,
map: map
});
bounds.extend(dmarker.getPosition());
} else {
var latlng = new google.maps.LatLng(markers[i].lat, markers[i].lng);
waypoints.push({
location: latlng,
stopover: true
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
}
service.route({
origin: src,
destination: des,
waypoints: waypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
poly.setPath(path);
map.fitBounds(bounds);
}
});
}html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="source" />
<input id="destination" />
<div id="map_canvas"></div>