Google map web part

SharePoint SPFX Google Maps Web Part

Trying to use Google Maps with the new SharePoint framework can be a daunting challenge. Well – just about anything using the new framework can be a challenge sometimes.

Quick Tech Summary: SPFX, Google Maps API, SharePoint Web Part, TypeScript, No Framework, VS Code, Node.js, NPM

After several hours of trial and error i finally managed to display a simple map in a SharePoint web part. Yes – this sounds simple. Essentially it really should be. For years most of us developers have been using the Google Maps api for mapping all sorts of applications. At first thought all of us are thinking this should be easy. Seriously 5 lines of code and I can get a map to render on any website.

<body>
   
<div id="map"></div>
   
<script>
     
var map;
     
function initMap() {
        map
= new google.maps.Map(document.getElementById('map'), {
          center
: {lat: -34.397, lng: 150.644},
          zoom
: 8
       
});
     
}
   
</script>
   
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
   
async defer></script>
 
</body>

So in SPFX TypeScript web parts the challenge straight up is the script tag. You simply can’t use it anywhere. By now if you are still reading this you are at least familiar with creating a web part: yo @microsoft/sharepoint with no Framwork selected

After searching for some time I was able to find a few examples using Angular and one using React. After loading the React example it was incomplete I decided to try it first without any framework.

Now if you are still learning the ropes like most of us are you are hoping to at least find some examples. Sorry to say but I couldnt find any examples anywhere of the following code. Now tradionally that means one of 2 things – you are doing it wrong or you are a pioneer. You don’t want to be the pioneer and almost always — you’re NOT! So – in light of that statement I am open to comments below if I am way off base here – but if so – my code works and it is simple.

Ok – moving on. You have your project. By now you have probably also found the Google materials indicating how to install the node modules and libraries but if not – this is what I did.

From your Node.js command prompt:

npm install google-maps

 

This should create your node-modules libraries like this in your project as found in your Visual Studio Code window.

Take a look at the README.md file. No – Really. That is where all the information you will really need to implement this exists. Notice the ‘Google.js’ file and min files are here. Next step is to update your ‘config.json’ file. (jquery is optional)

  “externals”: {
    “jquery”: “node_modules/jquery/dist/jquery.min.js”,   
    “GoogleMapsLoader”: “node_modules/google-maps/lib/Google.min.js” 
  },

 

Also notice the ‘GoogleMapsLoader’ name. It is not ‘google’.

Ok – now jump into your .ts file and add in …

import {GoogleMapsLoader} from ‘@google/maps’;

Same as always add in a map DIV…. (in your render section)

  <div id=”map” style=”height:500px”>map</div>

 

Now for the trick. In the Render method you can call out to your own function. The top line here is the trick. I did not find this anywhere including the ReadMe file. If you declare ‘GoogleMapsLoader’ as var — the typescript compiler would complain about the .load event. If you declare it though as ‘GoogleMapsLoader’ it would be ok.

Also note – nowhere in this code is any declaration for ‘google’. There are no import statements, vars or anything!

  private loadMap()
  {
    var GoogleMapsLoader:GoogleMapsLoader = require(‘google-maps’);
    GoogleMapsLoader.KEY = ‘xxxxx;
    GoogleMapsLoader.load(function(google) {          
      new google.maps.Map(document.getElementById(‘map’),  { center: {lat: 34.397, lng: 150.644}, zoom: 8});
    });
 
    GoogleMapsLoader.onLoad(function(google) {
      console.log(‘I just loaded google maps api’);
      alert (‘Google Maps Loader COMPLETE!!!!’);
    });    
    return “”;
  }

 

The 2nd command — ‘onLoad’ is optional as well. You can find info about this in the Readme file noted above.

The KEY ….  coming this summer of 2018 — you now have to have a registered and valid paid key from google. The free days are over and google wants a little change from you. Register a new API key and place it here.

Now for the proof… yes — Google Maps rendered in a SharePoint modern SPFX no framework web part.