The Google Maps JavaScript API v3 allows you to insert a custom map in any website easily and quickly. Even for those who have few notions of JavaScript, but want to venture in programming languages, this API from Google is quite easy to learn and intuitive.
We begin this tutorial with a brief basic notion of what is necessary to insert a map in a website:
- link for the Google Maps API to be insert into the <head> section of the page
- the placeholder in the website page to show the map
- CSS declarations to define the size of the reserved space for the map
- JavaScript file to set map options
Before you start this tutorial view a demonstration of the map or download the necessary code.
DEMO DOWNLOADLink to Google Maps API
The link to the Google Maps API makes a call to the JavaScript file that will load all map components and should be inserted into the <head> section of the page. In this case a parameter is sent - &sensor=false - indicating that this map will not make use of location sensors. This parameter is required and accepts the values false or true.
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
...
Space to display the map
The map can be inserted into any section of the page, it’s only necessary to reserve a specific space in the HTML file. Normally we use the <div> element with an id="map-canvas".
<body> <div id="map-canvas"></div> ...
The size of the map
The map size is defined by css rules and the height is the only required declaration. If you don't set a specific height, the <div id="map-canvas"> does not expand and the map is not displayed.
#map-canvas {
width: 400px;
height: 400px;
}
The previous example defines a width of 400px, but this value is optional. The measures can also be defined in percentages. The following code shows a full screen map.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
}
Customize the map
Our map options are declared in a JavaScript file as follows.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.680898,-8.684059),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
The function initialize() contains two variables mapOptions and map. The first variable defines some map options in its initialization phase. The second variable indicates the API where it should insert the map and it references the variable that contains the initial options. The options defined in this example are as follows:
- center: new google.maps.LatLng(40.680898,-8.684059)
in brackets we set Latitude and Longitude coordinates to define the center of the map - zoom: 11
this option sets the desired zoom level, it ranges between 0 and 21. With a higher value we get a more detailed map. The coverage area of the map is a relation between the size of the space reserved for the map and the zoom value. A higher zoom level is equal to a smaller coverage area. - mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeID defines what type of map shown on startup. This parameter does not restrict the type of map, the user can change it later.
Map Types: - ROADMAP (usual 2D map)
- SATELLITE (aerial photo images)
- HYBRID (aerial photography with overlapping streets and other information)
- TERRAIN (map in 3D mode with terrain information)
The variable var map = makes a call to the API and passes two parameters
- document.getElementById("map-canvas") indicates the space where the map should be displayed
- mapOptions sends the options defined early
Finally the function initialize() is initiated trough a listener of the API, the addDomListener. So, after the page has fully loaded, the event "load" occurs in the element window, the function initialize() is called and the map appears on the page.
View example.Google Maps Coordinates
Coordinates specified in google.maps.LatLng() are specific coordinates of the API and can be found as follows.
- Go to http://maps.google.com
- Find the desired location
- Click with the right button at the desired location and choose "What’s here?"
- In the search box (top-left) will apear the location coordinates. These are the values that should be used
All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.
Miguel Marnoto
My expertise in the Google Maps JavaScript API v3 is a consequence of my enthusiasm about maps and recognition of the importance that Google Maps service has on people lives.
Where is the good place to put the API key?
ReplyDelete