An introduction to Google Maps API: A Javascript Implementation ​

  University of Puerto Rico - Mayagüez  Department of Mathematics:  Computer Science  

An introduction to Google Maps API:  A Javascript Implementation    ​

​Manuel G. Ayala Ortiz

Jeansel A. Bladuell Cortes

​[email protected]​

Introduction Google Maps is an excellent tool for  business, promoting information like open  hours, menu, photos and location. The main  idea of this app is to help business grow in  Mayaguez promoting weekly information of  participating locations. But first we must  start with the basics, implementing a Map, a  marker, and user location. 

​[email protected] But first visit maps.google.com and get your  location in coordinates form, you will need  this later on.  Now visit again the link used in the above  section. There scroll down to the “Demos  and sample code” section. You will find a  source code, simply copy and paste it to  your favorite text editor.   Now take a look at the initMap function:  function​ initMap() {

Obtaining an API Key First things first, before you start  implementing a map, you need an API Key.  But luckily it's free, all you have to do is visit:  https://developers.google.com/maps/docu mentation/javascript/  And then click on “GET A KEY” at the top of  the page. 

​// Create a map object and specify the DOM element for display.

​var​ map = ​new

google.maps.​Map​(document.getElementById(​' map'​), { center: {lat: -​34.397​, lng: ​150.644​}, scrollwheel: ​false​, zoom: ​8

}); }

Creating your first Map Now it's time to create your first map.  

This function will allow you to create a map  and center it at a given location, this is  where your coordinates come in. Simply  replace the l​ at​ and ​lng​ elements with your  own.   Finally to be able to use this code you must  input your API Key where it says  “​YOUR_API_KEY​”: 

 

And that's it, you have successfully created  a map on your location. 

Adding a Marker Now lets edit that bit of code to add a  marker.  First create a new variable inside the  initMap function, lets name it ​my_location.  Here the variable will have values of the  coordinates you used for the first part, and it  will be defined in a particular way.  The variable should look like this:  var my_location = { ​ lat: ​YourLat​, lng: YourLng​}; Replace the elements Y ​ ourLat​ and Y ​ ourLng  with your own.  Now to add a marker add the following bit  of code under the map variable declaration  but inside the closing bracket “}”:    var​ my_marker = ​new​ google.maps.​Marker​({ position: my_location, map: map });

 

Adding an InfoWindow Next you would like to show a user some  type of information relating to the marker  you just added, for this Google Maps API  uses an “InfoWindow”.  But before you start to write the code, grab  a picture and upload it to the directory  where the HTML is located, you will use it  later.  So, let's get started with the “contentString”,  this is a variable where you will add  information to the infoWindow, and int can  be initialized the following way:  var​ contentString = 'My Home'​,​''​+ '

This is my home, also referred to as Where the cool people live'​,​''​;

Let’s break it down, ​My Home​ This creates a Heading with the words “My  Home”.  ''+ '

​This is my home​ This piece starts the body section and it  puts in ​bold​ the words “This is my home”.  ''

Finally, this section will add the image you  selected at the beginning of this section  using S ​ RC=”your_link”. N ​ ote: you can  change the image size by playing with the  width="70%" ​section. 

marker being dropped in a bakery.

You have successfully created the  information that will be shown int the  infoWindow.    Now the infoWindow function will be  defined as follows:  var​ infowindow = ​new

google.maps.​InfoWindow​({ content: contentString });

Finally you would want to be able to click  the marker and show the infoWindow right?    Then add the following code:  marker.addListener(​'click'​, ​function​() { infowindow.open(map, my_marker);

Display your own location To finish this guide we will show you how to  automatically add a marker to your location.    First look up online some marker icons, we  recomemend using  https://www.iconfinder.com/search/?q=ma rker&price=free     And save the icon to your directory. Next  add this piece of code to your own: 

});

var​ image = '​images/mylocationmarker.jpg​'; Now test it out, you should be able to see  the marker you added and when you click it  should “popup” the infoWindow with the  information you wrote along with the image,  here is an example from our work, the 

navigator.geolocation.​getCurrentPosition​(​fu nction​(​position​) { ​var​ pos = { lat: position.coords.latitude, lng: position.coords.longitude } v​ ar​ locationMarker = new google.maps.Marker({ position: pos,

map: map, icon: image, animation: google.maps.Animation.DROP }); Let's break down!,  var​ image = '​images/mylocationmarker.jpg​'; This will create a variable containing the  custom marker location​. navigator.geolocation.​getCurrentPosition​(​fu nction​(​position​) { ​var​ pos = { lat: position.coords.latitude, lng: position.coords.longitude } This section will start the geolocation  function and will save your Lat and Lng to  their respective variables.  ​var​ locationMarker = new google.maps.Marker({ position: pos, map: map, icon: image, animation: google.maps.Animation.DROP }); Finally the marker is created, with p ​ osition  as your location, ​map ​ as your initialized  map, i​ con b ​ eing the custom marker image  and finally ​animation i​ s just an effect to see  when the custom marker is loaded.    And THAT’S IT!    Congratulations you have now created your  first Google Map map, with custom marker  locations, info WIndows and even user  location. 

Conclusion   Google Maps is by far one of the best tools  for business, it's simple to understand, it’s  clean and informative and it presents the  user a simple view of information relating to  the location.     Google Maps API is cross-platform, we  chose to start off with the Javascript  implementation as a recommendation from  our mentor, Ana Carmen Gonzalez, and it  gave us a faster and easier way of  understanding the API, our hopes is that we  could continue with the other  implementations as well, but in the case  that we cannot this guide will serve as the  base for the following students or anyone  wanting to learn about Google Maps.    This was by far one of the most interesting  and fun experiences we have had in our  coursework. The whole concept and the  ease of use of Google Maps API made this  experience truly unique. We also hope that  we have presented this material as simple  and as clearly as possible.