How to add maps?

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

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

We are going to introduce the three primary steps to add a Google Map in your website.

The first step would be providing Basic Information.

Here is the description of each control on the page.

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

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

Map Type : In this field, you would need to choose an option for providing location to Map Center. 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 Map Type. In this field, you would need to provide “Formatted Address” for Map Center.

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

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

Map Type : In this field, you would need to choose Type of map. It could be Roadmap, Satellite, Hybrid or Terrain.

Zoom Level : In this field, you would need to choose the Resolution of the Current View. It should be from 0 (the entire world can be seen on one map) to 21.

Once everything is being setup, you would need to click on “Next Step” button located at bottom of the page to proceed further.

After clicking on Next Step button, you will be redirected to the following page as mentioned below.

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.

Now you would need to click on “Add Marker” button to add new marker.

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

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 of 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 “Formatted 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.

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.

Marker Category : This option becomes visible when “Choose Icon” option is being selected from “Marker Icon” drop-down. 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.

Marker Image : This option becomes visible when “Upload Icon” option is being selected from “Marker Icon” dropdown. 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.

After clicking on “Add Marker” button, you would reach the following page.

Following information would be displayed on the above mentioned page.

Icon : Under this column, you would be able to see “Marker Icon”.

Title : Under this column, you would be able to see “Title” for Marker.

Formatted Address : Under this column, you would be able to see “Formatted Address” for Marker.

Latitude : Under this column, you would be able to see “Latitude” for Marker.

Longitude : Under this column, you would be able to see “Longitude” for Marker.

Action : Under this column, you would see “Edit” and “Delete” icons.

By clicking on “Edit” icon, you would be able to edit marker settings.

This icon will delete the marker.

Bulk Action : If you would like to delete multiple markers together, then you would need to tick the appropriate checkboxes and then choose “Delete” option from the Bulk Action drop-down.

Apply : After selecting “Delete” option, click on “Apply” button to delete selected markers all together.

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

Now you would need to click on “Add Polygon” button to add new polygon.

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

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 add polygon.

After clicking on “Add Polygon” button, you would reach the following page.

Following information would be displayed on the above mentioned page.

Title : Under this column, you would be able to see “Title” for Polygon.

Coordinates : Under this column, you would be able to see “Coordinates” for Polygon Vertices.

Action : Under this column, you would see “Edit” and “Delete” icons.

By clicking on “Edit” icon, you would be able to edit polygon settings.

This icon will delete the polygon.

Bulk Action : If you would like to delete multiple polygons together, then you would need to tick the appropriate checkboxes and then choose “Delete” option from the Bulk Action drop-down.

Apply : After selecting “Delete” option, click on “Apply” button to delete selected polygons all together.

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

Now you would need to click on “Add Polyline” button to add new polyline.

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

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” of 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 add polyline.

After clicking on “Add Polyline” button, you would reach the following page.

Following information would be displayed on the above mentioned page.

Title : Under this column, you would be able to see “Title” for Polyline.

Coordinates : Under this column, you would be able to see “Coordinates” for Polyline.

Action : Under this column, you would see “Edit” and “Delete” icons.

By clicking on “Edit” icon, you would be able to edit polyline settings.

This icon will delete the polyline.

Bulk Action : If you would like to delete multiple polylines together, then you would need to tick the appropriate checkboxes and then choose “Delete” option from the Bulk Action drop-down.

Apply : After selecting “Delete” option, click on “Apply” button to delete selected polylines all together.

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

Now you would need to click on “Add Circle” button to add new circle.

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

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 drag handles 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.

After clicking on “Add Circle” button, you would reach the following page.

Following information would be displayed on the above mentioned page.

Title : Under this column, you would be able to see “Title” for Circle.

Coordinates : Under this column, you would be able to see “Coordinates” for Center of Circle.

Action : Under this column, you would see “Edit” and “Delete” icons.

By clicking on “Edit” icon, you would be able to edit circle settings.

This icon will delete the circle.

Bulk Action : If you would like to delete multiple circles together, then you would need to tick the appropriate checkboxes and then choose “Delete” option from the Bulk Action drop-down.

Apply : After selecting “Delete” option, click on “Apply” button to delete selected circles all together.

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

Now you would need to click on “Add Rectangle” button to add new rectangle.

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

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.

After clicking on “Add Rectangle” button, you would reach the following page.

Following information would be displayed on the above mentioned page.

Title : Under this column, you would be able to see “Title” for Rectangle.

Coordinates : Under this column, you would be able to see “Coordinates” for Rectangle Vertices.

Action : Under this column, you would see “Edit” and “Delete” icons.

By clicking on “Edit” icon, you would be able to edit rectangle settings.

This icon will delete the rectangle.

Bulk Action : If you would like to delete multiple rectangles together, then you would need to tick the appropriate checkboxes and then choose “Delete” option from the Bulk Action drop-down.

Apply : After selecting “Delete” option, click on “Apply” button to delete selected rectangles all together.

Once everything is being setup, you would need to click on “Next Step” button located at bottom of the page to proceed further.

After clicking on Next Step button, you will be redirected to the following page as mentioned below.

Here is the description of each control on the page.

Enable Bicycling Layer : In this field, you would need to choose Show to highlight Bicycling Routes on map.

Enable Traffic Layer : In this field, you would need to choose Show to highlight the roads and real-time traffic on them.

Enable Transit Layer : In this field, you would need to choose Show to display Public Transit Network of a city on the map.

Enable Heatmap Layer : In this field, you would need to choose Show to depict the Intensity of data at geographical points on the map.

Heatmap Gradient Color : In this field, you would need to choose Show to colorize the intensity of heatmap.

Heatmap Coordinates : In this field, you would need to provide “Coordinates” for heatmap data points.

Heatmap Opacity : In this field, you would need to provide “Opacity” for Heatmap. It should be from 0 to 100.

Heatmap Radius : In this field, you would need to provide “Radius” of influence for each data point on heatmap.

Enable Fusion Table Layer : In this field, you would need to choose Show to enable Fusion Table Layer. Using this, you can create Fusion Tables and render data from these tables as a layer on map.

Fusion Table Id : In this field, you would need to provide Id of Fusion Table.

Enable KML Layer : In this field, you would need to choose Show to display KML Layer on map. KML is a file format which can contain different geographical information.

KML Url : In this field, you would need to provide Url of KML file.

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