I am using the following code to display a Google map in a SharePoint 2013 code snippet.

  #map-canvas {
    width: 100%;
    height: 500px;
<script src="https://maps.googleapis.com/maps/api/js"></script>
// Add the marker
function initialize() {
  var mapOptions = {
    zoom: 9,
    center: new google.maps.LatLng(5.8579629,-4.2665575)
  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  var image =  'https://www.test.com/mymarker.png';
  var myLatLng = new google.maps.LatLng(5.8579629,-4.2665575); <<<-- I want my page fields to go in here!
  var beachMarker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image
google.maps.event.addDomListener(window, 'load', initialize);
<div id="map-canvas"></div>

For each location the only thing that changes is the Google co-ordinates (5.8579629,-4.2665575) so I would like to add the co-ordinates to a list which holds the location details and pull that data into the above script. Each location will have its own page.

Is this possible?


SharePoint 2013 introduces a new field type named Geolocation that enables you to annotate SharePoint lists with location information. In columns of type Geolocation, you can enter location information as a pair of latitude and longitude coordinates in decimal degrees or retrieve the coordinates of the user’s current location from the browser if it implements the W3C Geolocation API. In the list, SharePoint 2013 displays the location on a map powered by Bing Maps.

Once you added this field to the Page Content Type. You can add the location details, and use CSOM to read the data and display in the page.

  • I need to use Google maps for this, and i am using Jquery to display the map, prefer to stick to the Client side JS/JQ. I have updated my question.
    – Stephen
    Jan 19 '15 at 17:55
  • Yes you can either use the out of the box geo field to store this information or create a text field. Then using javascript object model read the value. Convert it as co-ordinates and use it to generate the map. Jan 19 '15 at 17:57
  • Its the "javascript object model read the value" bit that i don't understand how to get into the above code.
    – Stephen
    Jan 19 '15 at 18:07
  • So my column is called "Geoloction" how do i reference that in the snippet above
    – Stephen
    Jan 21 '15 at 12:03
  • You can use REST API, msdn.microsoft.com/en-us/library/office/… Jan 21 '15 at 13:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.