This document provides an overview of the Google Maps API and examples of how to initialize a map, add markers, geocode locations, get directions, display time zones and weather, and handle clustering of markers. It includes code snippets for basic map initialization, adding markers, geocoding an address, getting the user's current location, directions requests, and displaying time zone and weather data. Links are also provided for the Google Maps JavaScript API documentation and a book on PHP application development with NetBeans by the author.

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
);

6. GeoCoder
var geocoder = new google.maps.Geocoder();
var options = {
address: "BUET, Dhaka"
};
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.726557, 90.388506);
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.726557,90.388506&
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