Programming With Google Maps APIs – Part II

Hi! First of all, thank you for stopping by. It gives me strength to keep sharing what I like because I know it is all worth the effort. That being said, today, I am going to expand on what I did on Google Maps API part I by adding more features to our map. Last time, our map.js file has the following code:

[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
};
var map = new google.maps.Map(mapDiv, options);
};
})();
[/javascript]

Controlling The User Interface

  • disableDefaultUI – setting this property to true disables the default user interface. This further means the default zoom control and the map type chooser will not be displayed. Even if you disable the default user interface, you can still enable these controls individually. The default value is false. Example:

[javascript]
.
.
var options = {
center: new google.maps.LatLng(37.09, -95.71),
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP,
disableDefaultUI : true
//Alternatively, you can seperately enable or disable:
//mapTypeControl: true
//zoom
};
.
.
[/javascript]

Before disabling the default user interface, the map looked like this:
google-maps-api-roadmap
After disabling it, you will see something like this:

google-maps-api-disableui
As you can see, the rectangles represent the original position of our default user interfaces.

mapTypeControlOption

In a case where you decide to have mapTypeControl visible, then mapTypeControlOption controls how it will be displayed. It can look different depending on circumstances or your own decisions to place it where you want. One good thing also is that you can define what map types you would like the user to choose from. This property takes an object of type google.maps.MapTypeControlOptions as its value. It has three properties:

  1. style
  2. position
  3. mapTypeIds

As you might have guessed, while using mapTypeControlOptions, you must always remember to set mapTypeControl to true. 

Style

This property determines the appearance of the control. The values you can choose from reside in the google.maps.MapTypeControlStyle object. The choices are:

  1. DEFAULT – the look will vary depending on the window size and maybe other factors. If the map is big enough, you get a horizontal bar displayed, otherwise, a drop-down menu will be shown.
  2. HORIZONTAL_BAR – this displays the horizontal bar!
  3. DROPDOWN_MENU – displays a drop-down list to either save space or some other reason!

Code Example:

[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,
mapTypeControl : true,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(mapDiv, options);
};
})();
[/javascript]

Position

As you might have noticed, the default position of this control is in the upper-right corner. You can easily define it to appear somewhere beside the upper-right corner. To do that, you will need to use the google.maps.ControlPosition class. This class has several predefined positions you can choose from: BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT, TOP, TOP_LEFT, TOP_RIGHT.

Code Example: Style: DROPDOWN_MENU, Position: TOP

[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,
mapTypeControl: true,
mapTypeControlOptions : {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position : google.maps.ControlPosition.TOP
}
};
var map = new google.maps.Map(mapDiv, options);
};
})();
[/javascript]

The outcome is:

google-maps-api-position

mapTypeIds

You use this property to control which map type to display. It takes an array of available MapType controls you want to use. The code below shows how to add it to our map example:

[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,
mapTypeControl: true,
mapTypeControlOptions : {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position : google.maps.ControlPosition.TOP,
mapTypeIds :
[
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
}
};
var map = new google.maps.Map(mapDiv, options);
};
})();
[/javascript]

The final map now has a drop-down menu with a list of two MapTypeIds: ROADMAP and SATELLITE. Let us finish this post with a look!

final-google-map-api
I am going to stop here for today because I don’t want to make this post too long. So, I want to wrap up by saying congratulations for keeping up with me. Next time I will do some work on navigationControl and more! Thanks for stopping by and if you liked this post, please drop me a line and share it online! See you soon. If you have questions, please ask me!

Be The First To Get New Posts From Simple Developer…

Written By Elisha Chirchir

Elisha Chirchir is a software developer. He is also the founder of Simple Developer and co-founder of Instinctive Software Solutions. On any given day, he works on both Android and Web Development. During his 'free time', he offers training to those interested in learning how to code in php, java, python, javaScript etc. You can easily find him on StackOverflow Android chatroom or on Twitter @Eenvincible

One Comment on “Programming With Google Maps APIs – Part II

  1. […] new stuff. That being said, today, I am going to continue with our Google Maps APIs series. My last post  ended with the code below and so let us pick up from […]

Leave a Reply

Your email address will not be published. Required fields are marked *