Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google Maps API

5,156 views

Published on

The Google Maps Javascript API lets you embed Google Maps in your own web pages. Version 3 of this API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications.

Download Code samples at: https://app.box.com/s/p48udnd79pkeikcls66v

Published in: Technology, Business

Google Maps API

  1. 1. Google Map API M A Hossain Tonu http://mahtonu.wordpress.com GCDC Innovation Camp @BUET
  2. 2. Who am I? • • • • • Tech Blogger http://mahtonu.wordpress.com PHP Hacker, Community activist, FOSS advocate Work = Vantage Labs Dhaka @mahtonu Authored the title “PHP Application Development with NetBeans: Beginner's Guide” http:// link.packtpub.com/6HaElo
  3. 3. Initialize the Map https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=false
  4. 4. Initialize the Map var location = new google.maps.LatLng( 23.726557, 90.388506 ); var options = { zoom: 12, center: location, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( document.getElementById(‘map_canvas’), options );
  5. 5. GeoCoder var geocoder = new google.maps.Geocoder(); var options = { address: "BUET, Dhaka" }; geocoder.geocode(options, function(results, status) { map.setCenter( results[0].geometry.location ); });
  6. 6. My Current Location <!-- HTML5! huh! --> navigator.geolocation.getCurrentPosition(success, error); function success(position) { var location = new google.maps.LatLng( position.coords.latitude, position.coords.longitude ); map.setCenter(location); } function error() { ... }
  7. 7. Marker var LatLng = new google.maps.LatLng (23.726557, 90.388506); var marker = new google.maps.Marker({ position: LatLng, map: map, title: ‘marker title’, icon: ‘marker icon url’ });
  8. 8. Places var input = document.getElementById(‘input’); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo(‘bounds’, map); google.maps.event.addListener( autocomplete, ‘place_changed’, function() { var place = autocomplete.getPlace(); ... } );
  9. 9. Directions var service = new google.maps.DirectionsService(); var request = { origin: from, destination: to, travelMode: google.maps.TravelMode.DRIVING }; service.route(request, function(response, status) { ... });
  10. 10. Time Zones https://maps.googleapis.com/maps/api/ timezone/json? location=23.726557,90.388506& timestamp=135189720& sensor=false
  11. 11. Time Zones { dstOffset: 0, rawOffset: 21600, status: "OK", timeZoneId: "Asia/Dhaka", timeZoneName: "Bangladesh Standard Time" }
  12. 12. Local https://maps.googleapis.com/maps/api/js? sensor=false& language=bn
  13. 13. Weather var units = google.maps.weather.TemperatureUnit.CELSIUS; new google.maps.weather.WeatherLayer({ temperatureUnits: units, map: map }); new google.maps.weather.CloudLayer({ map: map });
  14. 14. Layers google.maps.BicyclingLayer
  15. 15. Too many Markers?
  16. 16. Clusterer url and screenshot
  17. 17. More than150 Features...
  18. 18. Q &A
  19. 19. References • https://developers.google.com/maps/documentation/ javascript/ • https://developers.google.com/maps/documentation/ javascript/reference
  20. 20. Shameless Promotion! http://link.packtpub.com/6HaElo

×