Adding a Google Map with a Marker

Introduction

Adding Google Maps to our website or web page is a common requirement. We can add google maps using HTML, CSS, and Javascript. We will see how we can use the following simple method to show a google map in our project. We can follow the simple steps to show a Google map with a marker:

Step 1: Create HTML markup

First of all, we will create a page or markup where we want to show the Google map. We need to set the height and weight of the wrapper or HTML element which contains our Google map in this step. Let us see the following example:

<html>
  <head>
    <style>
      #Gmap {
        width: 100%;
        height: 650px;
        }
    </style>
  </head>
  <body>
    <h3>
Adding Google Maps</h3>
<div id="Gmap"></div> // This is the map div
</body>
</html>

We have used the <style> tag in our head element to apply CSS to our Google map.

  #Gmap {
        width: 100%;
        height: 650px;
     }

We can use a similar kind of code to add Google Maps in our Angular project as well. Just go the component.html file where you want to add the Google Map. The code is shown as follows:

<div class="row">
    <div class="col-md-12">
       <div #gmap style="height:550px;background:#d1d1d1;"></div>
    </div>
</div>

Step 2: Adding Map Using Javascript Google Map API

This is the significant step to add Google Map and a marker using Google Map Javascript API reference. We will use this API to show the map and marker on our web page. 

We have to add a script that will load API from a URL. Here we can see that we have two query parameters in the URL. One is key which refers to the Google Map API key which is provided by Google. The second is the callback function which contains the code which should execute once API gets loaded. Here we have function Mapinit() which is defined as below. 


  • For the Angular project, we can add the below script to the index.html file in the <head> tag.

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=mapInit">
  </script>

Now we will see the mapInit() function. In this function, new google.maps.Map() creates a new Google Map Object. We have passed two arguments to this method. First is the id of the div element where we need to show our map. The center property coveys the latitude and longitude to center the map. We have to pass latitude first then longitude at second. We have passed other properties as well such as zoom which will set the zoom level of the map. 0 is the lowest value we can give to zoom property. We have draggable which makes map dragged by default. We can set it to false. mapTypeId is default set to ROADMAP. We can change it to TERRAIN, SATELLITE, ROADMAP or HYBRID. 
We have documentation for all the property options provided here that can be used to define Google Maps. 

  mapInit() {
  var pos = {lat: -25.344, lng: 131.036};
    var mapOptions = {
      streetViewControl: false,
      center: pos,
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
}
 
  • For the Angular project, go to component.ts file and write the below code to display Google Map.
export class AppComponent implements OnInit {
 @ViewChild('gmap') gmapElement: any;
   ngOninit(){
   this.mapInit();
   }
   mapInit() {
    var pos = {lat: -25.344, lng: 131.036};
    var mapProp = {
      streetViewControl: false,
      center: pos
      maxZoom: 15,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
    };
    var map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

Showing Marker on the Map

We can add the below code to add a marker on our google map as follows:

var marker = new google.maps.Marker({
  position: {lat: -25.344, lng: 131.036},
  map: map
});

Here the position property sets the position of the marker. The second is the map reference which we have created. So the code with the marker looks like:

  mapInit() {
  var pos = {lat: -25.344, lng: 131.036};
    var mapOptions = {
      streetViewControl: false,
      center: pos,
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
    var marker = new google.maps.Marker({position: {lat: -25.344, lng: 131.036}, map: map});
}

Step 3: Get Google Map API Key

We need an API key for google maps to work properly. API keys ensure authentication to use maps in our project. We should have at least one API key for our project. We can't request Google Maps API without a valid API key. To get an API key to follow this link
After getting the key, add it to the project as follows:

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY type="text/javascript"></script>

We have used the async attribute here so that the browser can load the page simultaneously when API is loading. Now we will see how to get the API key:
  • Visit the Google Platform Console Page.
  • Create or select a project. We need a project to get an API key from Google.
  • Click on continue to enable the API key.
  • Then go to credentials link in the left navigation. Select the Google Map Javascript API from the API page.
  • Enable billing and check the usage limits.
  • Now replace the key in the above URL as the value of the key query parameter.
  • Save the file and load it in the browser.
Let us see the screenshots below to understand the procedure


:

Comments