Locations Map
The dynamic map that displays company locations and provides useful information for organizing trips and meetings.
Last updated
Was this helpful?
The dynamic map that displays company locations and provides useful information for organizing trips and meetings.
Last updated
Was this helpful?
Our Locations Map webpart allows you to show all your companies’ locations in a world map through a map integrated with Google Maps. You can navigate through the map, see where your companies are located in a very dynamic way, and get to know company locations thanks to detailed and customizable information cards.
This component allows you to:
Locate your company's offices, branches, warehouses, and facilities.
Discover the local time, activities, and address of each facility.
Coordinate work with colleagues from other locations.
Google Maps APIs offer a limited number of free calls per month, after which you switch to a paid plan. The free calls are 28,500 per month, and you can find the information here:
If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
Click on it and, in the web part search box, enter Locations to quickly find and select the Locations Map web part, which is named IAI - Company Locations.
The procedure for configuring the Locations Map web part is divided into two parts: actions to be performed from the user interface and actions to be performed in a SharePoint list. The following section concerns the user interface, specifically the configuration pane of the web part.
The layout settings allows you to customize the appearance of your application by adjusting various layout settings.
By opening this first configuration, you will see the following options:
Do you want to hide the background? You can choose to hide or display the webpart background The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
Do you want to hide the background shadow? You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
Select the type of background shadow If you decide to set the background shadow, a further configuration will appear and you can select the style from High Contrast, Light, or Dark options.
If you select High contrast, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
By choosing the Light background shadow, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
Finally, the Dark background shadow style provides a darker, more intense effect, adding depth and emphasizing the background even more.
Do you want to hide the title? Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.
Enter the application title Thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “Company Locations” at the top left angle of the webpart.
Our Locations Map component uses Google Maps, so it's necessary to have your Google account key to configure it.
Here is what you can do from the user interface:
Enter site URL: select the Intranet site link.
List locations: insert the list named Company locations.
Enter the access key: insert the company’s Google API access key. If you don't have this key, the web part doesn't work.
The possibility of opening the map in a specific area has recently been added, so the web part has three new properties:
Latitude
Longitude
Zoom level (the default value is 1)
Enter the latitude coordinates: you need to enter the latitude coordinates of the company location.
Enter the longitude coordinates: you need to enter the longitude coordinates of the company location.
Enter the zoom level from a value of 1 to a value of 20: with this setting, you can choose the zoom level to be applied to the map so that you can better see locations that are in a smaller area.
For example, by zooming in on Europe you can have the following view:
In the display settings, you can also choose to show a description, the local time, the company name and the company address. This information will be visible by clicking on the pin marking the position of the locations.
Show description: by marking the flag on this option, the description will be visible.
Show local time: marking the flag on this option will display the local time of the reference location.
Show company: by ticking the flag on this option, the company name will be visible.
Show address: by ticking the flag on this option, the company address will be visible.
Enter the link to the marker image: enter the link of the image you want to use for pins. By default, the image is the Google pin, but if you want to change it, please note that it will be the same for every cluster. The image has to be uploaded to a document library where all users have at least view access, otherwise they will not be able to see the pin. The image link should not contain special characters.
You can then choose the color, the size and the position of the small numbers indicating how many offices there are in a cluster. For example, if a cluster includes two locations, you will see a pin with number 2 in this part of the map. Then, if you zoom in, you will see the geographical position of these locations in detail. Here, you can change the text color, the font size and the position of these numbers to obtain a good graphic effect.
In order to create a new location, a few steps are required, which are listed below:
Access the Site contents by clicking on the Settings icon, which is located on the top right of your Intranet’s homepage.
Access the list named Company locations, where you need to enter the various sites you want to view one by one.
Click on New and a window will open with fields to be filled in.
Fill in the following fields. The fields marked with an asterisk (*) are mandatory:
Content type: select the company location list.
Title: enter the name of the site.
Company: enter the name of the company located in that site.
Location Type: you can enter a brief description of the site you have created (e.g., production office).
Country: enter the name of the country where the site is located.
Address: enter the address of the office.
Street number: enter the street number of the location.
Postal code: enter the postal code of the location.
Latitude: enter the latitude of the location.
Longitude: enter the longitude of the location.
Description: enter a text to describe the company or the particular location/office you are dealing with. You can also link to a page or a website by typing the sentence you want to read and then embedding the url into the text (e.g., “Discover more”).
To insert the hyperlink in the description field, follow the steps below:
Click on the pencil icon to edit the description.
Text space: type the display text inside the text space.
Select the text: select all the written text.
Three-dot button: click on the “…” button in the top right-hand corner and then click on Add or edit hyperlink.
URL: insert the url of the page you want to link to.
The pin on the map is fully customizable and an image can be added.
To add a different preview image to the location, the image needs to be saved in the intranet. Just like the cluster image, this picture has to be uploaded to a document library where all users have at least view access, otherwise they will not be able to see the pin. The image link should not contain special characters.
In the homepage of your intranet, please click on Site contents inside the Settings section.
Once the Site contents page is open, please create a new folder by clicking on New on the top left of the page. Select Document library and give it a name, e.g., “Company-locations-images”:
Before clicking Create, remember to unflag the Show in site navigation box:
Once created, the document library will automatically open and look like this:
Here it’s possible to drag and drop the preview image.
Once the picture is uploaded to the document library, please select it, and click on the three dots icon on top of it.
The following pop-up menu will appear, then please click on View original.
A new tab will open, showing the picture; please consider this URL as the correct one to be pasted in the Marker Url field.
Then, come back to the Company locations list, select again the location, click on Edit and insert the url you’ve just created.
Now, click on Save. The pin with the personalized image is ready!
Click the Edit properties button on the left of the web part to open the property pane and set options such as Layout settings, Data sources, General settings and Display settings. See below for more information on each of these options.
Time zone: to get the name of the time zone, you need to access this link: . You will find the correct name in the TZ database name column. Write it in the Time zone box on the SharePoint list.
Marker url: : enter the url of the picture you want to use as a pin. You can have a different pin for each location you enter (e.g., for production sites, you may insert he image of a factory). In this case, you need to insert a specific image for each location. Please, refer to the to learn how to create the picture url.
