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>