June 19, 2016 10:39 am

Making the most of the Google Maps API – Adding a map

The Google Maps API allows us to embed maps of arbitrary continents, countries, regions, cities and spots. It not only allows us to do this but it enables us to customize the returned maps and personalize them with our own functionality. Let us build a web app which uses the Google Maps API to not only show a map of a city but adds quite a few markers to it, lines and popups which show additional content when a marker is clicked.

Making the most of the Google Maps API – Adding a map

The app is essentially going to center around the user (who should be in the city) and markers are going to be added for each bus stop in that city. When a user clicks on the marker/bus stop – he/she is going to be shown a list of the buses that stop there and the times when the next buses are going to arrive at the stop.  Furthermore, if a user clicks on a bus number – he/she is going to be shown a green line with the path that the bus takes from its initial departure to its final destination. If you are not from/in the given city (Ruse, Bulgaria) and want to take a look at the app you should uncomment the following lines of code because they will center the map around your current location and will show a marker pinpointing where you are located:

Adding a Google Map

To add a Google map, we create an HTML container where the map is going to be shown:

Before closing our body tag, we add Google Maps’ JavaScript file that makes it possible to add a map and transform it within our app:

Click here to get MYAPPKEY

You should note that when loading the script, we define our app’s key and we define a callback (a function) which will be called when the map loads.

When the script  loads our function launchMap will be called. In it, we use the Google Maps API to initialize a new map  by calling google.maps.Map with two arguments – the first is the HTML element where the map will load and the second is a list of options (the zoom and the center are required). For the map center, we give the latitude and longitude coordinates of the chosen city. We set zoom to 15 but you can play with it to find an optimal zoom for your purpose.

Finally, we initialize our custom logic which will customize the created map by calling the init method on the object that we will create next.

It is important to know that your HTML element which contains the map (#map, in our case) should have some size dimensions otherwise nothing may get shown. We have given it the following CSS rules making it take the entire screen real estate:

In the next part, we are going to customize the Google Map that we have just added and add our functionality to it.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter

Tutorial Categories: