) that contains the map. The MapOptions object contains some properties that control the behavior of this map container.

noClear

Every time your map loads on the browser, it clears the map container (div element) of any content before inserting anything. Setting noClear to false will preserve the content of the map container. The opposite is true.

backgroundColor

This property sets the color of the container’s background. You will notice this when panning the map and before the map tiles are loaded. You can set its value using either hexadecimal value code starting with a ‘#’ symbol or using standard color keywords like ‘blue’, ‘white’ etc.

Code Example – noColor and backgroundColor

[javascript]
.
.
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true,
backgroundColor: ‘#bbccff’
};
.
.
[/javascript]

Controlling The Cursor

These set of properties control how the cursor will look like under certain circumstances.

draggableCursor

You can use this property to control what cursor to use when hovering over a draggable object on the map – like the pegman! You can set it either by providing it with the name of the cursor like ‘crosshair’, ‘pointer’, or ‘move’, or using a url to your own image. There are more names to explore.

draggingCursor

This is similar to draggableCursor except it controls the cursor being used while dragging an object in the map.

Combined Code Example google maps api:

[javascript]
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true,
backgroundColor: ‘#bbccff’,
draggableCursor: ‘move’,
//draggingCursor: ‘move’
};
[/javascript]

Controlling The Map Settings Using Methods

It has been fun changing properties of our map options. The question now remains: how do we change the same properties after the map is loaded? Don’t worry! There is a way out of this – the map object has methods.

There are two kinds of methods: the generic setOptions() method and specific methods for each of the properties.

setOptions

This is a method of the map object and it takes a mapOptions object as the only attribute. Using it simply entails creating an object literal and then passing it to this method.

[javascript]
//
var options = {
zoom : 4
};

map.setOptions(options);

//or you can be cool and do this:

map.setOptions({
zoom: 4,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
[/javascript]

You can use the setOptions() method to change most of the map properties except a few:

• backgroundColor
• disableDefaultUI
• noClear

That means that you should be careful to define these properties up front while initializing the map.

The Specific Methods

These types of methods are available for both setting and getting the values of the required properties of the mapOptions object: center, zoom and mapTypeId.

Getting and setting the zoom level

[javascript]
//

var zoomlevel = map.getZoom();
map.setZoom(18); //number

//
[/javascript]

Getting and setting the center of the map

[javascript]
//

var center = map.getCenter();
map.setCenter(latlng: LatLng);

//
[/javascript]

Getting and setting the mapTypeId

[javascript]
//

var maptype = map.getMapTypeId();
map.setMapTypeId(mapTypeId: MapTypeId)

//
[/javascript]

Using the getter and setter methods for good!

Since we now know about the methods and the fact that we can use them to do some fun stuff to our map, like changing the map type and zoom, let us see how we can improve our map. Inside our index.html file, we add two buttons to get values and set values respectively.

[html]
< !DOCTYPE html>

Welcome To Google Maps API

[/html]

And now the main code that does the job:

[javascript]
(function () {
window.onload = function () {
var mapDiv = document.getElementById(‘map’);
var latlng = new google.maps.LatLng(37.09, -95.71);

var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true,
backgroundColor: ‘#bbccff’,
draggableCursor: ‘move’
};
var map = new google.maps.Map(mapDiv, options);

document.getElementById(‘getValues’).onclick = function(){
alert(map.getZoom());
alert(map.getCenter());
alert(map.getMapTypeId());
}
document.getElementById(‘setValues’).onclick = function(){
map.setOptions({
center: new google.maps.LatLng(36.1000, 112.1000),
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
};
})();
[/javascript]

If you end up running this code on your own, try guessing where the second map shows (it is somewhere in North America). If you don’t know, you can copy and paste the coordinates shown above to the Google search bar. You can get the values by simply clicking the GET-VALUES button on top of the map. Either way, this is how our map looks like:

Clicking the SET-VALUES button will change our map from the above type to the one below showing a specific location(try guessing it first).

Try zooming out as you see if you can identify this secret location.

Thank you for reading through this post on Google maps api. I will stop here because I believe I have done enough for today. If you have any questions, please ask me and I will be more than glad to answer them. Next post will include concepts like markers and more fun features. Please subscribe for more and see you soon!