google maps api does not work in google chrome extension

Question

I am making a google chrome extension using JavaScript, HTML, CSS. For this I need to read longitude and latitude of an address provided by a user. While testing my extension I am keep getting below error

Here is my js code

result: {
            data: function (from, to, hrs, mins) {
                fromaddress     = from;
                toaddress   = to;
                hours       = hrs;
                minutes     = mins;

                View.result.readLatLng();
            },

            readLatLng: function () {
                //var addressone = document.getElementById("addressone").value;
                geocoder    = new google.maps.Geocoder();
                geocoder.geocode( { 'address': fromaddress}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.latitude;
                    var longitude = results[0].geometry.location.longitude;
                    console.log('lat: ' + latitude + ', lng: ' + longitude);
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
            }
        }

and here is my manifest.json file

{
  "name": "Name",
  "version": "1.0",
  "manifest_version": 2,
  "background": { 
    "scripts": [
      "js/result.js",
      "js/script.js"
    ] 
  },
  "description": "Desc",
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_title": "Title",
    "default_popup": "html/popup.html"
  },
  "permissions": [ 
    "http://*/",
    "https://maps.google.com/*",
    "https://maps.googleapis.com/*",
    "http://localhost/*",
    "geolocation"
  ],
  "content_security_policy": "script-src 'self' https://maps.googleapis.com https://maps.gstatic.com; object-src 'self'"
}

Please help me how can I solve this?

Answer 1

The Google Maps API loader uses document.write() and apparently that is not allowed in Chrome extensions. See here:

I use your maps in my extension for Google Chrome. Now I try to switch to Chrome Extension manifest.v2 and found that Content Security Policy is required to use. But your code contains "eval" function use and document.write to load scripts, so your maps can't be initialized.