locked
Connecting a list to Google maps RRS feed

  • Question

  • Is there documentation that explains how to connect items from a list into Google maps which would be displayed on the site page? I've tried multiple sources but most are either way outdated or just don't work. This is for SharePoint Online. TIA!
    Tuesday, March 17, 2020 8:05 PM

Answers

  • Hello,

    You could try the Geo Mapper Web Part here, this would achieve your requirements:

    https://amrein.bitalus.com/products/wp?q=23

    Best Regards,

    Michael Han


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by OrionHntr Thursday, March 19, 2020 2:47 AM
    Wednesday, March 18, 2020 7:51 AM

All replies

  • First Create a List and Add a Column to your List called Location (Single Line of text) and add few items in the list by placing some states in the location and Create and save a file named JsLinkMapView.js and add the following code.

    Note : Be sure to enter your own Google API Key in the Code first line!

    document.write(‘<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=<<your google api key here>>“></script>’);
    function RegisterCustomOverrides() {
    var obj = {};
    obj.Templates = {};
    obj.Templates.OnPostRender = LoadMap;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(obj);
    }
    function LoadMap(ctx) {
    var mapOptions = {
    center: new google.maps.LatLng(42, -88),
    zoom: 6
    };
    var map = new google.maps.Map(document.getElementById(“map-canvas”), mapOptions);
    var geo = new google.maps.Geocoder();
    var bounds = new google.maps.LatLngBounds();
    var rows = ctx.ListData.Row;
    var idx = 0;
    for (var i = 0; i < rows.length; i++) {
    geo.geocode({‘address’:rows[i][“Location”]},function(results, status) {
    new google.maps.Marker({map: map, [0].geometry.location, title: rows[idx++].Title});
    bounds.extend(results[0].geometry.location);
    map.fitBounds(bounds);
    });
    }
    }
    RegisterModuleInit(“/SiteAssets/JSLinkMapView.js”, RegisterCustomOverrides);
    RegisterCustomOverrides();

    upload JsLinkMapView.js file to the Site Assets document Library of your site. 

    Then Go to Edit Page and Add a Content Editor Web Part and click Add Web Part and Choose Media and Content and Choose Content Editor and Click Add with the Content editor Web Part now added, click to Edit web part and activate the ribbon options, then choose Edit Source and paste the below code in the CEWP source Windows and click OK, you have now created the container for the Google Map.

    <div id="map-canvas" style="border: 1px solid black; height: 200px;"></div>

    Now, Click Edit Web Part from the List View web part's context menu and Expand Miscellaneous and paste the following in the JSLink field and click ok.

    example : https://site_Url/SiteAssets/JsLinkMapView.js

    Now click the Stop Editing button on the Ribbon. You should be able to see the Google Maps in your page.

    Below article with clear screenshots for your reference:

    https://www.incworx.com/blog/diy-custom-sharepoint-series

    Thanks & Regards,


    sharath aluri


    Tuesday, March 17, 2020 10:56 PM
  • I will give that a try and see if it works. What I used was very similar. Thanks for the quick reply!
    Wednesday, March 18, 2020 2:44 AM
  • Hello,

    You could try the Geo Mapper Web Part here, this would achieve your requirements:

    https://amrein.bitalus.com/products/wp?q=23

    Best Regards,

    Michael Han


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by OrionHntr Thursday, March 19, 2020 2:47 AM
    Wednesday, March 18, 2020 7:51 AM
  • This works perfectly. Thanks!
    Wednesday, March 18, 2020 9:10 PM
  • Couldn't get this to work at all. Too many errors within the code.
    Wednesday, March 18, 2020 9:10 PM
  • Hello,

    Glad that helps you. Please remember to mark my reply as an answer to close this thread.

    Thanks for your understanding.

    Best Regards,

    Michael Han


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, March 19, 2020 2:44 AM