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.

Answer 2

This is answer is in addendum to Marcelo's answer as I cannot yet comment and my edit was rejected.

You can circumvent the issue by changing the "content_security_policy" key in your manifest file by adding the 'unsafe-eval' attribute such as

"content_security_policy": "script-src 'self' 'unsafe-eval' https://; object-src 'self'"

Discussion of Chrome Extension Content Security Policy

As mentioned in comments on Marcelo's answer, the Streetview code in the Google Maps API source makes use of document.write(), an eval-like construct. Eval is inherently unsafe so hopefully Google will address this issue with their Maps API source code.

I'm not sure how, if at all, this might affect submitting an extension to the Chrome Store. I have, however, successfully used the Google Maps API in a local unpacked extension.

Answer 3

I too had problems with the Google Geocoding API when building a web app. A potential issue with your code that I can see right away deals with how you get the lat and lng.

Try this instead:

var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();