Google Maps for Angular

Google Maps provides powerful mapping technology that is available to use inside your own applications. In this blog, I’ll explain how you can get started using it inside an Angular web app.

Before You Start

Before you can start working with Google Maps in your Angular app, you need to get a Google Map API key, which you can do here: Get Your API Key for Google Maps

Set Up Google Maps

After getting you API key, you will need to add Google Maps to the <head> tag of your application’s index.html page so it will download the Google Maps into your application. That code will look the the following:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

Please do not forget to replace the API_KEY with your own key.

After adding the script, you will need to install the Google Maps Angular component (@angular/google-maps) using NPM, which is used as a wrapper for the Google Maps JavaScript APIs. To install the @angular/google-maps component, use the command below:

npm i @angular/google-maps

After installing the @angular/google-maps component, it is necessary to import it to the app module or component module in the application where it will be used:

import { GoogleMapsModule } from '@angular/google-maps'
...
@NgModule({
  declaration: [ ... ]
  imports: [ ..., GoogleMapsModule ],
 })
...

After all these preliminary settings, you can now add a Google Maps component in your application by using <google-map> in the HTML:

<div class="map">
  <google-map></google-map>
</div>

Google Maps’ Initial Settings

Let’s move on to setting up the map’s display. There are several parameters available for the Google Maps component, including the following:

  1. width & height
  2. mapTypeId
  3. center
  4. zoom
  5. options

When we first load the application, the default settings for centering and zooming will be used on the map.

Google Maps default coordinates
A map with the default settings

If you plan to use the map to display a specific location, you must add map settings using the [options] attribute. For example, we can add Paris as the center position of the map:

<div class="map">
  <google-map [options]="mapOptions"></google-map>
</div>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mapOptions: google.maps.MapOptions = {
    center: { lat: 48.8588548, lng: 2.347035 },
  };
}

The map now displays with its center at the specified location.

Google Maps Paris coordinates
The map centered on Paris, France

There are several ways to remove the UI buttons you don’t want. One way is to set the disableDefaultUI attribute to true. This will remove all zoom control, map type control, street view control, and fullscreen control from the map.

The other way is to set those controls to false individually. This way, you can keep what you need and remove what you don’t want:

mapOptions: google.maps.MapOptions = {
    center: { lat: 48.8588548, lng: 2.347035 },
    zoomControl: false,
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
};
Google Maps without controls
A map with some controls hidden

Add a Marker

We can use the component to add markers to the map, which takes options and a position as input parameters. Let’s add a marker for the Eiffel Tower:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mapOptions: google.maps.MapOptions = {
    center: { lat: 48.8588548, lng: 2.347035 },
    zoomControl: false,
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
  };

  markerPosition = { lat: 48.8634286, lng: 2.3114617 };
}
<div class="map">
  <google-map height="100vh"
              width="100%"
              [options]="mapOptions">
    <map-marker [position]="markerPosition"></map-marker>
  </google-map>
</div>
Google map with Paris coordinates and a marker for the Eiffel Tower
A marker on the Eiffel Tower

Conclusion

I hope that this short guide to using Google Maps will help you easily start using and configuring Google Maps.

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.