Thursday, 30 May 2013

Google Map Using Javascript

Things that are covered:
  1. Auto-complete Location using Google Places API
  2. Zoom Changed Event
  3. Radius Calculation
  4. 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>


googleMap.js

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; }
googleMap.css

      #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!

0 comments:

Post a Comment

Find me on Facebook! Follow me on Twitter!