Programming With Google Maps APIs- part IV

Hello! 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:

(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);
    };
})();

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(<div id=”map”>) 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

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

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:

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'
};

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.

var options = {
   zoom : 4
};

map.setOptions(options);

//or you can be cool and do this:

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

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

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

Getting and setting the center of the map

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

Getting and setting the mapTypeId

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

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.

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   	  <title>Google Maps Tutorial</title>
   	  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
   	  <script src="map.js"></script>
   	  <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <h1>Welcome To Google Maps</h1>
        <input type="button" id="getValues" value="GET-VALUES" />
        <input type="button" id="setValues" value="SET-VALUES" />
        <div id="map"></div>
    </body>
</html>

And now the main code that does the job:

(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
            });
        }
    };
})();

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:

google-maps-api-methods
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).

google-maps-last
Try zooming out as you see if you can identify this secret location.
Thank you for reading through this post. 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. See you soon!

Advertisements

4 thoughts on “Programming With Google Maps APIs- part IV

  1. Hi there. Very much enjoyed reading this blog. I’m a newbie to jScript and almost 60 years old. I’ve got a question you may be able to help me with:

    Instead of clicking on Get and Set values, I’d like to have a links change the map. For instance, on this page (http://newsite.blancopc.com/contact/), I’m trying to get the link to the Miami office open in the map div on the page instead of a new window.

    I’m sure this is simple but it’s beyond me.

    Thanks.

    1. It has been long since I was on this blog; I would highly recommend visiting my new and awesome blog at simpledeveloper.com/ then find your article under Google Maps API.

I know you want to say something, say it!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s