Google Map API

M A Hossain Tonuhttp://mahtonu.wordpress.com

GCDC Innovation Camp @BUET

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

Initialize the Map

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

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

);

GeoCodervar geocoder = new google.maps.Geocoder();

var options = {

address: "BUET, Dhaka"

};

geocoder.geocode(options, function(results, status) {

map.setCenter(

results[0].geometry.location

);

});

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

Markervar 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’

});

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

...

}

);

Directionsvar service = new google.maps.DirectionsService();

var request = {

origin: from,

destination: to,

travelMode: google.maps.TravelMode.DRIVING

};

service.route(request, function(response, status) {

...

});

Time Zones

https://maps.googleapis.com/maps/api/timezone/json?

location=23.726557,90.388506&

timestamp=135189720&

sensor=false

Time Zones{

dstOffset: 0,

rawOffset: 21600,

status: "OK",

timeZoneId: "Asia/Dhaka",

timeZoneName: "Bangladesh Standard Time"

}

Local

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

Weathervar units = google.maps.weather.TemperatureUnit.CELSIUS;

new google.maps.weather.WeatherLayer({

temperatureUnits: units,

map: map

});

new google.maps.weather.CloudLayer({

map: map

});

Layersgoogle.maps.BicyclingLayer

Too many Markers?

Clusterer

url and screenshot

More than150 Features...

Q & A

References

• https://developers.google.com/maps/documentation/javascript/

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

Shameless Promotion!

http://link.packtpub.com/6HaElo