Programming With Google Maps APIs – part I

Welcome to Google Maps Api! 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!


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.


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>

Google Maps Tutorial</><br /> <script src=""></script><br /> <script src="map.js"></script> <link rel="stylesheet" type="text/css" href="main.css" />

My First Map – ROADMAP


That, just so you know, is all you need in your html file to use Google Maps Api! 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:

//do really important stuff here


})(“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 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!

Please see below for related posts on Google Maps APi. I really appreciate you stopping by!

If you have any questions on Google Maps Api, 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.

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

3 Comments on “Programming With Google Maps APIs – part I

  1. […] 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 […]

  2. Ilan Reply

    May 30, 2015 at 1:52

    I want to create an app based on Google Maps for flight simulation.
    My basic question is whether its possible to send the api a coordinate on earth and once the imagery is loaded convert it into the flight simulator format(BMP) for that temporary usage and not for constant saving on the computer disk.
    For that reason i need to know first how to find the imagery once it is downloaded.
    I’m not sure also its under the TOS of google but my goal is use the imagery for that temporary usage and not for saving it on my computer.

    • Elisha Chirchir Reply

      June 6, 2015 at 6:10

      I am not certain whether that is possible; have you searched a bit on Google?

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.