Google Map Using Javascript
Things that are covered:
- Auto-complete Location using Google Places API
- Zoom Changed Event
- Radius Calculation
- Distance Calculation
Map.html
<!DOCTYPE html>
<head>
<title>Google Map Using Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="googleMap.js"></script>
<link type="text/css" rel="stylesheet" href="googleMap.css" />
</head>
<body>
<div>
<div style="float: left;">
<form onsubmit="onSubmitSearchLocation(this.address.value); return false" >
<input size="100" type="text" name="address" id="address" value="" placeholder="Location" title="Search">
<input type="button" onclick="onSubmitSearchLocation(document.getElementById('address').value)" value="Search"/>
</form>
<div id="map"></div>
</div>
<div id="mapinfoDiv" style="float: right;width: 410px;">
Map Info
<button onclick="clearDivContent()">Clear Content</button>
<hr>
<div id="mapinfo"></div>
</div>
</div>
<script type="text/javascript">
initialize(37.4419, -122.1419);
currentLocationView();
function clearDivContent(){
document.getElementById("mapinfo").innerHTML = '';
}
</script>
</body>
</html>
var map;
var infowindow;
var markersArray = [];
var tempPlace ;
function initialize(selectedLat,selectedLong) {
var pyrmont = new google.maps.LatLng(selectedLat,selectedLong);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 10,
streetViewControl: false
});
var searchedAddress = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(searchedAddress);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
onSearchCLicked(place.geometry.location,searchedAddress.value);
tempPlace = autocomplete.getPlace();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log("zoom_changed: " + map.getZoom());
document.getElementById("mapinfo").innerHTML = "Zoom Level: " + map.getZoom();
getDistance();
findDistance();
});
}
function onSearchCLicked(locationSearched,searchedAddress)
{
map.setCenter(locationSearched);
map.setZoom(12);
locationSearched = locationSearched.toString().replace("(","");
locationSearched = locationSearched.toString().replace(")","");
var latlng = locationSearched.toString().split(",") ;
var pyrmont = new google.maps.LatLng(latlng[0],latlng[1]);
var request = {
location: pyrmont,
radius: 500000,
name: searchedAddress
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if(results.length > 0){
clearOverlays();
}
if (status == google.maps.places.PlacesServiceStatus.OK) {
//clearOverlays();
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}else
{
if(tempPlace != '' && tempPlace != undefined)
{
clearOverlays();
createMarker(tempPlace);
}
}
}
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
markersArray.length = 0;
}
function closeInfoWindows() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].infowindow.close();
}
}
}
function createMarker(place) {
var searchedAddress = document.getElementById("address").value;
var placeLoc = place.geometry.location;
/*
For Marker Image change
http://powerhut.co.uk/googlemaps/custom_markers.php/
*/
var image = new google.maps.MarkerImage(
'map_marker.png',
new google.maps.Size(23,53),
new google.maps.Point(0,0),
new google.maps.Point(12,53)
);
var marker = new google.maps.Marker({
map: map,
draggable: true,
icon:image,
position: place.geometry.location
});
markersArray.push(marker);
google.maps.event.addListener(marker, "dragend", function(event) {
placeLoc = this.getPosition();
var locationSearched = placeLoc.toString().replace("(","");
locationSearched = locationSearched.toString().replace(")","");
var latlng = locationSearched.toString().split(",") ;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
latLng: this.getPosition()
}, function(responses){
if (responses && responses.length > 0){
var redirectURL;
document.getElementById("address").value=responses[0].formatted_address;
searchedAddress = '' ;
infowindow.setContent("
Address:
" + responses[0].formatted_address + "
");
infowindow.open(map, marker);
} else {
alert('Cannot determine address at this location.');
}
});
});
google.maps.event.addListener(marker, 'click', function() {
placeLoc = this.getPosition();
var locationSearched = placeLoc.toString().replace("(","");
locationSearched = locationSearched.toString().replace(")","");
var latlng = locationSearched.toString().split(",") ;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
latLng: this.getPosition()
}, function(responses){
if (responses && responses.length > 0){
var redirectURL;
document.getElementById("address").value=responses[0].formatted_address;
infowindow.setContent("
Address:
" + responses[0].formatted_address + "
");
infowindow.open(map, marker);
} else {
alert('Cannot determine address at this location.');
}
});
});
}
function currentLocationView()
{
// Try HTML5 geolocation for redirecting to current location
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
map.setZoom(12);
var latlng = [];
latlng.push(position.coords.latitude);
latlng.push(position.coords.longitude);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function getDistance(){
bounds = map.getBounds();
if(bounds == undefined)
return 0.18207856772 ;
center = bounds.getCenter();
ne = bounds.getNorthEast();
// r = radius of the earth in statute miles
var r = 3963.0;
// Convert lat or lng from decimal degrees into radians (divide by 57.2958)
var lat1 = center.lat() / 57.2958;
var lon1 = center.lng() / 57.2958;
var lat2 = ne.lat() / 57.2958;
var lon2 = ne.lng() / 57.2958;
// distance = circle radius from center to Northeast corner of bounds
var dis = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) +
Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));
document.getElementById("mapinfo").innerHTML = document.getElementById("mapinfo").innerHTML + "
Radius:-
Miles: " + (dis) + "
KM: " + (dis*1.60934);
return dis;
}
var Rm = 3961; // mean radius of the earth (miles) at 39 degrees from the equator
var Rk = 6373; // mean radius of the earth (km) at 39 degrees from the equator
/* main function */
function findDistance() {
var t1, n1, t2, n2, lat1, lon1, lat2, lon2, dlat, dlon, a, c, dm, dk, mi, km;
bounds = map.getBounds();
if(bounds == undefined)
return 0.18207856772 ;
center = bounds.getCenter();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
// get values for lat1, lon1, lat2, and lon2
t1 = ne.lat();
n1 = ne.lng();
t2 = sw.lat();
n2 = sw.lng();
// convert coordinates to radians
lat1 = deg2rad(t1);
lon1 = deg2rad(n1);
lat2 = deg2rad(t2);
lon2 = deg2rad(n2);
// find the differences between the coordinates
dlat = lat2 - lat1;
dlon = lon2 - lon1;
// here's the heavy lifting
a = Math.pow(Math.sin(dlat/2),2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(dlon/2),2);
c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a)); // great circle distance in radians
dm = c * Rm; // great circle distance in miles
dk = c * Rk; // great circle distance in km
// round the results down to the nearest 1/1000
mi = round(dm);
km = round(dk);
// display the result
document.getElementById("mapinfo").innerHTML = document.getElementById("mapinfo").innerHTML + "
Distance between North East Lat-Lng and South West Lat-Lng:-
KM2: " + km + "
Miles2: " + mi ;
document.getElementById("mapinfo").innerHTML = document.getElementById("mapinfo").innerHTML + "
Lat 1: " + ne.lat() + "
Lng 1: " + ne.lng() ;
document.getElementById("mapinfo").innerHTML = document.getElementById("mapinfo").innerHTML + "
Lat 2: " + sw.lat() + "
Lng 2: " + sw.lng() ;
}
// convert degrees to radians
function deg2rad(deg) {
rad = deg * Math.PI/180; // radians = degrees * pi/180
return rad;
}
// round to the nearest 1/1000
function round(x) {
return Math.round( x * 1000) / 1000;
}
#map {
height: 600px;
width: 1150px;
border: 1px solid #333;
margin-top: 0.6em;
}
.pac-container
{
color: black;
width: 370px !important;
}
map_marker.png
Output
Thats it!
