Google Map API

2,500 views
2,622 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
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,500
On SlideShare
0
From Embeds
0
Number of Embeds
1,554
Actions
Shares
0
Downloads
20
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Google Map API

  1. 1. Google Map API M A Hossain Tonu http://mahtonu.wordpress.com gDay Bangladesh 2014
  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

×