Display Google Map in popup window

483 views
Skip to first unread message

Alexandru Florea

unread,
Mar 29, 2015, 10:33:29 PM3/29/15
to chromium-...@chromium.org
Hi,

I am trying to do something really simple, to display a Google map in a Chrome popup window, yet for some reason I only manage to get an image rather than an interactive map. 

I find it confusing especially since the code used for the popup works just fine in the browser and displays a full screen map as expected. The manifest, HTML and JavaScript files I use are below:

Manifest file:
{
  "manifest_version": 2,

  "name": "Popup Map",
  "description": "This extension displays a Google Map(supposedly)!",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "map.html",
    "default_title": "Click here to see the map!"
  },
  "permissions": [
  ],
  "content_security_policy": "default-src 'self' https://maps.google.com/ https://maps.googleapis.com/ https://maps.gstatic.com/; object-src 'self'; style-src 'unsafe-inline' *;"
}

HTML file:
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    </script>
    <script type="text/javascript" src="map.js"></script>
  </head>
  <body>
<div id="map-canvas"></div>
  </body>
</html>

JS file:
function initialize() {

  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Here's the stuff!"
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

Everything seems pretty straightforward to me, although I am new to extensions so I get the feeling it might be something really obvious. 

Here's what I'm getting instead of an interactive map. I can increase the size of that tiny image via CSS, yet it's irrelevant since I don't need the image. Any suggestions would be greatly appreciated!

Best regards,
Alex Florea
Reply all
Reply to author
Forward
0 new messages