Integrating Google Maps 3 in website
Integrating Google Maps 3 has a few steps to do:
1. Include the maps library:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>2. Make an area to display the map
<div id="map_canvas"></div>3. Display the map in the area with id map_canvas.
<script>Some points to node are:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(27.7, 85.33333330000005),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
1. use <!doctypt >
2. Change the latitude and longitude in this line below where the format is (latitude,longitude)
center: new google.maps.LatLng(27.7, 85.33333330000005),If you don't know the latitude and longitude of the place you want to use in Google maps integration then check this post: Getting Latitude and Longitude from Google Maps.
The full working code snippet to integrate Google Maps 3 is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Maps 3 Integration </title>
<style>
#map_canvas {
width: 600px;
height: 400px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(27.7, 85.33333330000005),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Comments
Post a Comment