How to add overlay on maps?

On the Google Maps Bank’s Navigation Panel, select Overlays – Add Overlay.

Once you click on “Add Overlay”, you will be redirected to the following page as mentioned below.

Choose Map : In this field, you would need to choose a particular map for which you would like to add overlay.

After selecting a Map, you will be redirected to the following page as mentioned below.

Overlays Screen - Google Maps Bank

Here is the description of each control on the page.

Overlay Type : In this field, you would need to choose “Overlay Type” for map. It could be Marker, Polygon, Polyline, Circle or Rectangle.

Here is the screenshot once you select “Marker” as Overlay Type.

Overlays Screen - Google Maps Bank

Here is the description of each control on the page.

Marker Title : In this field, you would need to provide “Title” for Marker.

Marker Description : In this field, you would need to provide “Description” for Marker.

Marker Type : In this field, you would need to choose an option for providing location to the Marker. You can provide “Formatted Address” or “Latitude & Longitude” values of location.

Formatted Address : This option becomes visible when “By Formatted Address” is being selected for Marker Type. In this field, you would need to provide “Address” for Marker.

Latitude : This option becomes visible when “By Latitude/Longitude” is being selected for Marker Type. In this field, you would need to provide “Latitude” for Marker.

Longitude : This option becomes visible when “By Latitude/Longitude” is being selected for Marker Type. In this field, you would need to provide “Longitude” for Marker Type.

Marker Icon : In this field, you would need to choose “Marker Icon”. You can choose from default icon, existing icons or upload your own. If you would like to choose from existing icons, then choose “Choose Icon” or if you would like to upload your own icon, then choose “Upload Icon” option.

Here is the screenshot once you select “Choose Icon” as Marker Icon.

Marker Category : In this field, you would need to choose “Category” for Marker Icon. You can choose from various categories that are provided to you in dropdown.

After selecting Marker Category, you would be able to see icons from selected category displayed under “Marker Category” dropdown. Now you can choose from these icons by clicking on the required icon.

Here is the screenshot once you select “Upload Icon” as Marker Icon.

Marker Image : In this field, you would need to upload image for Marker Icon.

Marker Animation : In this field, you would need to choose “Animation Effect” for displaying marker in map.

Info Window : In this field, you would need to choose Enable to display Info Window on Marker.

Info Window Image : In this field, you would need to upload image to be displayed on Info Window.

Once everything is being setup, you would need to click on “Add Marker” button located at bottom of the page to save the marker.

Here is the screenshot once you select “Polygon” as Overlay Type.

Here is the description of each control on the page.

Polygon Title : In this field, you would need to provide “Title” for Polygon.

Polygon Description : In this field, you would need to provide “Description” for Polygon.

Stroke Weight : In this field, you would need to provide “Width” for edges of Polygon.

Stroke Style : In this field, you would need to provide “Color” and “Opacity” for edges of Polygon. Opacity should be from 0 to 100.

Fill Color : In this field, you would need to provide “Color” and “Opacity” for enclosed area of Polygon. Opacity should be from 0 to 100.

Coordinates : In this field, you would need to provide “Coordinates” for Polygon Vertices. For this, you would need to click on particular locations on map and it will automatically generate Latitude and Longitude for that location. You would need to drag handles to reposition, reshape and resize the polygon directly on the map.

Info Window : In this field, you would need to choose Enable to display Info Window on Polygon.

Info Window Image : In this field, you would need to upload image to be displayed on Info Window.

Once everything is being setup, you would need to click on “Add Polygon” button located at bottom of the page to save the settings.

Here is the screenshot once you select “Polyline” as Overlay Type.

Here is the description of each control on the page.

Polyline Title : In this field, you would need to provide “Title” for Polyline.

Polyline Description : In this field, you would need to provide “Description” for Polyline.

Stroke Weight : In this field, you would need to provide “Width” for Polyline.

Stroke Style : In this field, you would need to provide “Color” and “Opacity” for Polyline. Opacity should be from 0 to 100.

Polyline Type : In this field, you would need to choose “Line Style” for Polyline.

Coordinates : In this field, you would need to provide “Coordinates” for Polyline. For this, you would need to click on particular locations on map and it will automatically generate Latitude and Longitude for that location. You would need to drag handles to reposition and resize the polyline directly on the map.

Info Window : In this field, you would need to choose Enable to display Info Window on Polyline.

Info Window Image : In this field, you would need to upload image to be displayed on Info Window.

Once everything is being setup, you would need to click on “Add Polyline” button located at bottom of the page to save the polyline.

Here is the screenshot once you select “Circle” as Overlay Type.

Here is the description of each control on the page.

Circle Title : In this field, you would need to provide “Title” for Circle.

Circle Description : In this field, you would need to provide “Description” for Circle.

Stroke Weight : In this field, you would need to provide “Width” for edge of Circle.

Stroke Style : In this field, you would need to provide “Color” and “Opacity” for edge of Circle. Opacity should be from 0 to 100.

Fill Color : In this field, you would need to provide “Color” and “Opacity” for area within the Circle. Opacity should be from 0 to 100.

Radius Value : In this field, you would need to provide “Radius” for Circle. You can also provide radius directly by dragging handles on the map.

Radius Distance : In this field, you would need to choose Measurement Unit for Radius Distance of Circle. It could be Meters, Kilometers or Miles.

Coordinates : In this field, you would need to provide “Coordinates” for Center of the Circle. For this, you would need to click on particular location on map and it will automatically generate Latitude and Longitude for that location. You would need to reposition and resize the circle directly on the map.

Info Window : In this field, you would need to choose Enable to display Info Window on Circle.

Info Window Image : In this field, you would need to upload image to be displayed on Info Window.

Once everything is being setup, you would need to click on “Add Circle” button located at bottom of the page to save the circle.

Here is the screenshot once you select “Rectangle” as Overlay Type.

Add Overlay Screen

Here is the description of each control on the page.

Rectangle Title : In this field, you would need to provide “Title” for Rectangle.

Rectangle Description : In this field, you would need to provide “Description” for Rectangle.

Stroke Style : In this field, you would need to provide “Color” and “Opacity” for edges of Rectangle. Opacity should be from 0 to 100.

Fill Color : In this field, you would need to provide “Color” and “Opacity” for area within the Rectangle. Opacity should be from 0 to 100.

Coordinates : In this field, you would need to provide “Coordinates” for Rectangle Vertices. For this, you would need to click on particular locations on map and it will automatically generate Latitude and Longitude for that location. After creating rectangle, you would need to drag handles to reposition and resize the rectangle directly on the map.

Info Window : In this field, you would need to choose Enable to display Info Window on Rectangle.

Info Window Image : In this field, you would need to upload image to be displayed on Info Window.

Once everything is being setup, you would need to click on “Add Rectangle” button located at bottom of the page to save the rectangle.