I am getting error after adding google map as a static resource in salesforce

Question

I used this in lightning component but i got error

var latlng = new google.maps.LatLng(lat, lon);
        var geocoder =new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlng }, 
                       function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    alert("Location: " + results[1].formatted_address);
                }
            }
        });

Refused to load the script 'http://maps.googleapis.com/maps-api-v3/api/js/25/6/common.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension: 'unsafe-inline' 'unsafe-eval' https://ssl.gstatic.com/accessibility/".

Answer 1

At the moment, Salesforce is not allowing to include third party libraries, frameworks in any lightning package. But as per the documents, you can achieve this by using an iframe or Visualforce container with your libraries and put them inside the component(or any lightning package).

Any Lightning package that uses Angular or React or other third party DOM-based templating frameworks will automatically fail the security review until such time as we provide documentation on how to integrate these components with Lightning. In order to use another framework as part of a package that uses Lightning, please use an iframe or Visualforce container until approved Lightning containers are published.

https://developer.salesforce.com/page/Requirements_Checklist

So for your requirement try to

1. Create a visualforce page with your google map requirement.
2. Check "Available for Salesforce mobile apps and Lightning Pages".
3. Create a new Tab (Visualforce Tab) and assign your page.
4. If you need to access it in Salesforce1 as well, go to Salesforce1 Navigation and enable the newly created tab.