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/82e28g2c4o2nl1yu7mwm

1. Google Map API
M A Hossain Tonu
http://mahtonu.wordpress.com

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.744522,
90.372828
);
var options = {
zoom: 12,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById(‘map_canvas’),
options
);

6. GeoCoder
var geocoder = new google.maps.Geocoder();
var options = {
address: "United International University, Satmasjid Road, Dhaka, Dhaka
Division."
};
geocoder.geocode(options, function(results, status) {
map.setCenter(
results[0].geometry.location
);
});

7. 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() { ... }

8. Marker
var LatLng = new google.maps.LatLng(23.744522, 90.372828);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title:‘marker title’,
icon:‘marker icon url’
});

10. 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();
...
}
);

13. Directions
var service = new google.maps.DirectionsService();
var request = {
origin: from,
destination: to,
travelMode: google.maps.TravelMode.DRIVING
};
service.route(request, function(response, status) {
...
});

15. Time Zones
https://maps.googleapis.com/maps/api/
timezone/json?
location=23.744522,90.372828&
timestamp=135189720&
sensor=false

16. Time Zones
{
dstOffset: 0,
rawOffset: 21600,
status: "OK",
timeZoneId: "Asia/Dhaka",
timeZoneName: "Bangladesh Standard Time"
}

17. Local
https://maps.googleapis.com/maps/api/js?
sensor=false& language=bn

20. Weather
var units = google.maps.weather.TemperatureUnit.CELSIUS;
new google.maps.weather.WeatherLayer({
temperatureUnits: units,
map: map
});
new google.maps.weather.CloudLayer({
map: map
});

22. Layers
google.maps.BicyclingLayer

23. Too many Markers?

24. Clusterer
url and screenshot

25. More than150 Features...

26. Q & A

27. References
• https://developers.google.com/maps/documentation/
javascript/
• https://developers.google.com/maps/documentation/
javascript/reference

28. Shameless Promotion!
http://link.packtpub.com/6HaElo