Integrating Google Maps to your Angular Application: Part 2

In my previous blog, we saw how Angular developers can integrate Google Maps into their applications as well as learned more about obtaining an API key, creating components, and using a custom service for map functionality.

With this blog, I’d like to take you a step ahead and address a unique business need of customizing multiple locations. Additionally, we will see how you can add several markers and deploy Google Maps API to cluster them effectively.

There are many features of Google Maps that make it unique and helpful for competitive businesses. Read ahead to see how you too can customize Google Maps using the Google Map API features with an overview of how to:

1. Add and customize shapes
2. Add markers and clusters on Google Maps

1. Adding and customizing shapes on Google Maps

Adding a polygon

The paths property of a polygon object specifies an array of arrays of type MVCArray. Each array defines a separate sequence of ordered LatLng coordinates.

You can construct a simple polygon with only one path by using an array of LatLng coordinates. When the paths property is constructed, the Maps JavaScript API will convert the simple array into an array of arrays. The API provides a simple getPath() method for polygons consisting of one path.

The polygon’s  editable  property specifies whether users can edit the shape. In the same way, you can make the shape draggable by setting the draggable property.

When a shape is edited, an event is fired upon completion of the edit. These events are:

• insert_at
• remove_at
• set_at

The listener must be placed on the path of the polygon. If the polygon contains multiple pathways, each path must have its own listener set.

Listening to dragging events

Events are fired when a shape is dragged at the beginning, middle, and throughout the dragging process. The following events are fired for polylines, polygons, circles, and rectangles:

• Dragstart: When the user begins dragging the shape, it fires.
• Drag: Fired repeatedly while the user is dragging the shape.
• Dragend: Fired when the user stops dragging the shape.

Removing a polygon

By calling the setMap() method with null as the input, a polygon can be deleted from the map. In the example, drawPolygon is a polygon object:

2. Add markers on Google Maps

Google Maps provides unique markers to mark a single location on a map.

By defining the point to be marked using latlng and instantiating the marker class, you can add a straightforward marker on the map at any desired location.

A letter or number that appears inside a marker is called a marker label. When creating a marker, you can specify a label property in the MarkerOptions object. A tooltip will show the marker’s title.

Remove markers

Use the setMap() function with null as the input to remove a marker from the map.

The above method does not delete the marker. It only removes the marker from the map. If you want to delete the marker, you will need to remove it from the map, and then set the marker itself to null.

Create marker clusters

Marker clusters are created to make the data values easier to understand and to improve performance. Put simply, it is the idea of sampling the data values into larger chunks. It is a simple solution to display many markers on a map, or a chart.

A cluster’s number indicates how many markers are present. The cluster will have fewer markers initially and as you zoom in on the map, the points will begin to show.

1. Add a marker clusterer library into your application.

2. Add a marker clusterer in your application.

The markers array is sent to the marker clusterer by this sample.

You now have a Google map with Polygon, Markers and Marker Clusters.

And that’s it! You have now deftly learned how to use Google Map API features in your angular application.

Reach out to us at Nitor Infotech to learn more about customizing your applications by integrating Google Maps APIs.