Angular Google Map Component Basics: Tips and Tricks

About a year ago, Angular introduced a google map component (@angular/google-maps) as a wrapper of google map javascript API. In this post, we will go over some basics and tips on how to use the component in your application.

Before we start

In order to use the google map component, we need to get a google map API key first. If you don’t already have the key, please follow the steps here to create one: https://developers.google.com/maps/documentation/javascript/get-api-key

Set up

After getting the API key, we need to add the following script to index.html of the application to load a google map. Here is a template of the script tag. Please replace “YOUR_API_KEY” with your own key and add it to the head tag of the application.

Install @angular/google-maps by running the following script.

npm i @angular/google-maps

In your app module or component module, import GoogleMapsModule.

Now, you can add a google-map to your HTML.

Handling common errors

Before we jump into other tips and tricks let’s make sure you are able to load the map without getting any errors.

Common Error 1

Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

Solution: If you are having the error, you need to check if your Google Maps API key is valid. Also, please double-check the script tag is added inside of the head element in the DOM.

Common Error 2

Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://localhost:4200/

Solution: If you are getting this error, this means your API keys are restricted to certain websites. Please follow this link and allow your websites for your API key. https://console.cloud.google.com/apis/credentials. There are many ways to restrict your API keys such as URL, IP address, or type of devices (ios or android). If you don’t want any restrictions, you can simply change the Application Restriction to None. Note: changing restrictions may take up to 5 minutes.

Now you are ready to use the Angular google map component!

Adding Map and Marker

When you load the application, you will see a simple google map. There are several inputs available for the component and the lists are following.

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

If you plan to use the map with only center and zoom, you can simply pass those two inputs to the component. However, if you want more advanced settings, you can use the options parameter to pass more settings to the component. Since the options parameter also includes, ‘mapTypeId’, ‘center’, and ‘zoom’ properties, you can simply include everything into options without using separate inputs. You can visit the following link to get a full list of map options property. https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions

Marker component is available as “map-maker”, which takes position and options as inputs. There are many different events available for the marker component, but we will only focus on the position of the marker in this article. If you want to see more about other inputs and events for the marker component, please visit https://github.com/angular/components/tree/master/src/google-maps/map-marker.

Google Map Marker Example

Tips and Tricks

1. Customizing the Width and Height of the component

The width and height of the google map can be changed by passing numbers (in pixels) to the component. Also, if you simply want to take all the space of the parent container, you can pass 100% to width and height inputs. In many cases, however, you might want to use a CSS file to pass the styles to the component. You can use the CSS by passing null to both width and height properties. For the example below, it only has one default width and height, but you can have your own custom sizes for different media queries such as desktop, tablet, and mobile views.

2. Removing default buttons

There are a couple of ways to remove the UI buttons that you don’t want. One way is to set the disableDefaultUI 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.

Google Map with Default UI Disabled

3. Fit the Map to Markers

If you have more than 2 markers on the map, it would be very difficult to calculate the center position and zoom level to fit all of your markers on the map. In this case, you can use the ‘fitBounds’ method from the google map component. It takes LatLngBoundsLiteral type which has north, south, east, and west value as an input. Here is an example of fitting the markers without providing a specific center position or zoom level.

4. Starting with Street View

After the view is initialized, we can get a street view of the map and set the options to modify the map. After setting the options,setVisible(true) will turn your map into the street view.

Note: if you get an empty black screen, the position that you passed in might not be available for street view.

Google Map Street View Example

Thank you for reading my first Medium post, and I hope these basic tricks help you start with the Angular google map component. If you have any thoughts or suggestions, please let me know. Also, feel free to share any other tips and tricks in the comment below.