Your SlideShare is downloading. ×
0
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Google Maps API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google Maps API

2,166

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 …

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
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,166
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
44
Comments
2
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Google Map API M A Hossain Tonu http://mahtonu.wordpress.com GCDC Innovation Camp @BUET
  • 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. Initialize the Map https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=false
  • 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. 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. 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. 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. 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. 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. Time Zones https://maps.googleapis.com/maps/api/ timezone/json? location=23.726557,90.388506& timestamp=135189720& sensor=false
  • 11. Time Zones { dstOffset: 0, rawOffset: 21600, status: "OK", timeZoneId: "Asia/Dhaka", timeZoneName: "Bangladesh Standard Time" }
  • 12. Local https://maps.googleapis.com/maps/api/js? sensor=false& language=bn
  • 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. Layers google.maps.BicyclingLayer
  • 15. Too many Markers?
  • 16. Clusterer url and screenshot
  • 17. More than150 Features...
  • 18. Q &A
  • 19. References • https://developers.google.com/maps/documentation/ javascript/ • https://developers.google.com/maps/documentation/ javascript/reference
  • 20. Shameless Promotion! http://link.packtpub.com/6HaElo

×