Create mini map with Google Map API

Introduce

I am implementing the function of using Google Map API to draw maps in the project, in which there are a number of requests from customers that need to be done, so I am writing this article to share how to do those requests. Summarize the request of the Guest as follows

• Create a map with a mini map to change the view instead of the default button, when moving the main map, the mini map will also move.
• Create maps with markers, replace marker icons
• Hide Google logo, footer of Google Map

Mini map is a small map part of the Google Map map that we often use, it looks like the following figure:

Create Map from Google Map API

First we need to write the following HTML code

Create markers

Next we need to create a list of markers by creating a fakeMarkers array, then running a loop to create the marker and info window as follows:

Create mini map

To create a mini map, I will create a new map anchored in an HTML element with id = “mini-map” with the minimap’s typeMap will be satellite type (the main map is in a roadmap by default). Next will add an event when clicking on the minimap will change the main map to satellite and on the mini map will change the typeMap to roadmap , specifically the code as follows:

The result will be as shown below

Add CSS hidden footer and Google logo

To hide, we need to override the default CSS of Google Map, the code is as follows