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
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
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
);
5.
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’
});
9.
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();
...
}
);
11.
12.
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) {
...
});
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
});