Programming With Google Maps APIs – part I

Hello! I hope you are doing fine! This week, I am going to do some programming with Google Maps APIs. Perhaps you have been curious and are interested in playing around it especially considering the vast smartphone apps opportunities. You might be thinking about an app that will help you track Santa (during Christmas for that matter) or restaurants you visit. Let us get started! So, here is what you will see when done with the first step int this tutorial!

google-maps-api-roadmap

Just before I show you another variation of the above image, I would like to say that am using Javascript – a wildly used front-end language. As you can see above, that map is a roadmap. Now let us look at another type : satellite.

google-maps-api-satellite

There you have it. By the end of this post, you might be surprised by how easy it is to arrive at a functional map! I don’t want to waste your time, so let us get to it.

The index.html file

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta 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>My First Map - ROADMAP</h1>
        <div id="map"></div>
    </body>
</html>

That, just so you know, is all you need in your html file! First, the most important part to notice is the script source file to point to where the Google Maps api resides. You must include it in your html file. The other important thing is the div element inside the body tag. That is where your map will be displayed when your page is loaded on the browser. That is all. Now let us look at the other script file included above (map.js).

The map.js file

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

Believe it or not, the above code is the main part of our map generator. This however does not mean that you cannot have hundreds or even thousands of lines of code. In fact, this is just the basic part of Google Maps.

As seen above, I encapsulated the main code by wrapping it around a self-executing function. This is common in Javascript. It looks like this:

(function(message){
  //do really important stuff here

  alert(message)

})("Some good message here");

That being said, the next line in our code ensures that the main code is executed only after the browser window has loaded(window.onload). We then store a reference to our map id in a mapDiv variable. We will need it later because that is where our map will display.

The next variable(latlng) is, you guessed it, an instance of the LatLng object created using the new keyword. LatLng() takes at least two arguments (latitude and longitude of a location you want to display).

MapOptions

MapOptions resides in an object that is passed to the map. It contains the information about how you want your map to look and behave. This object is in a form of an object literal(creating an object on the fly – means that you supply values while you create it). Now using javascript, we create a variable called options and give it three properties that a map requires in order for it to work.

  1. center – this defines the center of a map with a coordinate. The value must be of type google.maps.LatLng(described earlier).
  2. zoom – defines the initial zoom level of the map. Must be a number between 1(when zoomed all the way out) and 23(when zoomed all the way in). The deepest zoom level can vary depending on the available map data.
  3. mapTypeId – defines what type of map you initially want to display. All map types are found in google.maps.MapTypeId (examples: ROADMAP, SATELLITE).
//create an object literal - options
var options = {
   center : latlng,
   zoom: 10,
   mapTypeId : google.maps.MapTypeId.SATELLITE //ROADMAP
};

Now we can complete our first map by actually creating it. How simple right?

//All maps are of type google.maps.Map

var map = new google.maps.Map(mapDiv, options);

//We pass mapDiv - our map id reference inside our index.html file
//and secondly, options literal object we just created above.

That is all you need to have a working map. I hope this helped you learn something useful. Next time, I will be adding new stuff and making our map more interesting and appealing!

If you have any questions, please let me know through the comments section. Any errors? Please point them out to me and I will fix them. Thanks for stopping by and please subscribe for updates if you find this blog useful.

Advertisements

One thought on “Programming With Google Maps APIs – part I

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