The document provides an overview of using the Google Maps API, including initialization of the map, geocoding, and adding markers. It also mentions the integration of local weather data and directions services, along with resources for further reference. The author is M.A. Hossain Tonu, a tech blogger and PHP developer.

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