Welcome to Google Maps Api series. If you have been here before, you might have noticed that I decided to change my blog theme and I hope you like this just like I do. I wanted to make reading easier and still maintain a cleaner look. That being said, let me start our 4th post on Google Maps APIs. My 3rd post had this code:
Google Maps API by Examples
[javascript]
(function () {
window.onload = function () {
var mapDiv = document.getElementById(‘map’);
var latlng = new google.maps.LatLng(37.09, -95.71);
var options = {
center: latlng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
navigationControl:true,
keyboardShortcuts: false,
disableDoubleClickZoom: true,
draggable: false,
streetViewControl: true,
navigationControlOptions :{
position: google.maps.ControlPosition.TOP_RIGHT,
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};
var map = new google.maps.Map(mapDiv, options);
};
})();
[/javascript]
Now let us move on to something new:
Controlling The Map Container
As I said yesterday(in post number 3), when I say ‘the map container’, I am referring to the html element(
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!
Programming With Google Maps APIs – Part V | Simple Developer
[…] I am back and I hope you are doing good today. At the end of my fourth Google Maps APIs post, I mentioned in passing that I will be starting with Markers today and that is exactly […]