Google map styling


Shalu Saraswat

CTO, IT Junkies

Before starting the styling of the map, see how to integrate google map in angular

Integrate Google map in angular

Styling Map :

after integrating map you can style map by the following process:

go to link: and style your map and copy JSON and paste into map options array.

your code will look like this :

mapOptions example

by adding this style in mapOptions, map design will change as per your selected style of map.

Add info window in the map :

adding map info with a pointer

1. Make a div for window HTML

let windowContent = "< div id='map-info'>Info Window of my Map< /div >";

here windowContent is code for map info window design. change its HTML according to your design.

2. to show info window with pointer in map, add following code

let infowindow = new google.maps.InfoWindow({
  content: windowContent
google.maps.event.addListener(this.marker, 'click', function() {,this.marker);

By this, we can see our infowindow in map. here is the sample result with a map.

you can customize infoWindow as per your requirement.

Thank you.

Pic Credit : Google

Latest Blogs

Challenges of Starting Up in a Tier 3 City

Read More

Different kinds of favicons in 2020

Read More

What Is GraphQL ? Why should we use it

Read More