Display Locations on a Map in SharePoint 2013

Display Locations on a Map in SharePoint 2013 and SharePoint online

Here we will be dynamically displaying the locations contained in a list on a Bing Maps map in a SharePoint 2013 site.

Step 1: Create the list
Create the list that will contain the locations to show on the map.

Step 2: Get a Bing Maps key
You can obtain a valid Bing Maps key from here.
Note- login here with your Microsoft account.

Step 3: Creating the location field
To create the location field on our list we need to use a custom form in a page containing a script. So first create a page where you wish to place the custom form. On that page add a Script Editor web part.
Paste the below code in the Script Editor Web part-
<script type="text/javascript">
var clientContext;
var relativeAdress;

 function AddGeolocationField() {
 ClearNotifications();
 GetRelativeAdress();
 clientContext = new SP.ClientContext(relativeAdress);
 var web = clientContext.get_web();

 var targetList = web.get_lists().getByTitle(document.getElementById('listname_input_id').value);
 var fields = targetList.get_fields();
 fields.addFieldAsXml(
 "<Field Type='Geolocation' DisplayName='" + document.getElementById('fieldname_input_id').value + "'/>",
 true,
 SP.AddFieldOptions.addToDefaultContentType);

 clientContext.load(fields);
 clientContext.executeQueryAsync(function (sender, args) {
 document.getElementById('success_id').innerHTML = "You have succesfully created new geolocation field.";
 },
 function (sender, args) {
 document.getElementById('error_id').innerHTML = "Error: "+args.get_message();
 });
 }


 function SetBingKey() {
 ClearNotifications();
 GetRelativeAdress();
 clientContext = new SP.ClientContext(relativeAdress);

 var web = clientContext.get_web();
 var webProperties = web.get_allProperties();

 webProperties.set_item("BING_MAPS_KEY", document.getElementById('bing_key_id').value);
 web.update();
 clientContext.load(web);

 clientContext.executeQueryAsync(function (sender, args) {
 document.getElementById('success_id').innerHTML = "You have succesfully entered BING map key on "+web.get_title()+" site";
 }, function (sender, args) {
 document.getElementById('error_id').innerHTML = "Error: "+args.get_message();
 });
 }

 function GetBingKey() {

 ClearNotifications();
 GetRelativeAdress();

 clientContext = new SP.ClientContext(relativeAdress);
 var web = clientContext.get_web();

 var webProperties = web.get_allProperties();

 clientContext.load(webProperties);

 clientContext.executeQueryAsync(function (sender, args) {
 document.getElementById('bing_key_id').value = (webProperties.get_fieldValues()["BING_MAPS_KEY"]);

 }, function (sender, args) {
 document.getElementById('bing_key_id').value = "";
 document.getElementById('error_id').innerHTML = "Property not found! Please check your web site relative URL.";
 });
 }

 function ClearNotifications(){
 document.getElementById('success_id').innerHTML = "";
 document.getElementById('error_id').innerHTML = "";
 }

 function GetRelativeAdress(){
 if (document.getElementById('webrelative_url_id').value === "")
 relativeAdress = "/";
 else
 relativeAdress = document.getElementById('webrelative_url_id').value;
 if(relativeAdress.charAt(0)!='/')
 document.getElementById('error_id').innerHTML = "Relative adress has to start with /";
 }

 </script>

<table style="width: 480px;">
<tbody>
<tr>
<td style="width: 200px;">Web relative URL:</td>
<td style="width: 5px;">&nbsp</td>
<td valign="top"><input id="webrelative_url_id" name="relative" type="text" value="/">
<label style="font-size: 8pt;">
* Input web relative URL and select "Get BING key" to check if key is set</label></td>
<td style="text-align: right;" valign="top"><input onclick="GetBingKey()" type="button" value="Get BING key"></td>
</tr>
<tr>
<td style="width: 200px;" valign="top">Bing Maps Key:</td>
<td style="width: 5px;">&nbsp</td>
<td valign="top"><input id="bing_key_id" name="bingkey" type="text">
<label style="font-size: 8pt;">
* Input Bing map key and relative url to web site to wich you wish to add the key</label></td>
<td style="text-align: right;" valign="top"><input onclick="SetBingKey()" type="button" value="Set BING key"></td>
</tr>
<tr>
<td style="width: 200px;" valign="top">List name:</td>
<td style="width: 5px;">&nbsp</td>
<td valign="top"><input id="listname_input_id" name="listname" type="text">
<label style="font-size: 8pt;">
* Name of the list where you wish to add your new geolocation field</label></td>
<td></td>
</tr>
<tr>
<td valign="top">Field name:</td>
<td style="width: 5px;">&nbsp</td>
<td valign="top"><input id="fieldname_input_id" name="fieldname" type="text">
<label style="font-size: 8pt;">
* Name of the new geolocation field you wish to add</label></td>
<td style="text-align: right;" valign="top"><input onclick="AddGeolocationField()" type="button" value="Create field"></td>
</tr>
</tbody>
</table>
<label id="error_id" style="color: red;">
</label>
<label id="success_id" style="color: green;">
</label>

Step 4: Create the Map view
You now have the possibility to create a Map view for your list to show locations.

Step 5: Create a new item to this list by entering longitude and latitude of specific country you want to display.