Get at Google Maps from a Chrome extension?

[Sam Dutton]

Is it possible to get the Map object(s) for a page that has one or more Google Maps on it, in Chrome at least?

From a Chrome extension, I would like to access Map objects any Google Maps that are on the current page.

...or is there a reason why this isn't possible?

(Also asked this question on Stack Overflow, but haven't had a response.)

[Chris Broadfoot]

It's possible. You could create an extension that sits in between the API loading and other scripts on the page.

You'd wrap the default google maps constructors and store a reference somewhere.

... why not just use the debugger, though?

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/SlB2SmJvejZySlFK.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

--
http://twitter.com/broady

[Sam Dutton]

Thanks for your reply, Chris.

> ... why not just use the debugger, though?

For my extension I want to get at the Map object(s) for any page with one or maps on it, using the JavaScript API to access getBounds(), getDiv(), etc, for each map.

> You'd wrap the default google maps constructors and store a reference somewhere.

Not sure what you mean by this -- could you elaborate? Obviously an extension could only get access to Map objects after page load.

Sam

[Chris Broadfoot]

On Sat, Jun 4, 2011 at 12:09 AM, Sam Dutton <dut...@google.com> wrote:

Not sure what you mean by this -- could you elaborate? Obviously an extension could only get access to Map objects after page load.

You want to inject your hook after the Maps API main.js file.

The code below is completely untested and puts way too much stuff in global scope, but I hope it gives you some ideas on how to implement this.

<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/5/5/main.js" type="text/javascript"></script>

... inject this:

<script type="text/javascript">

  window.allMaps = [];

  window.oldMapConstructor = google.maps.Map;

  google.maps.Map = function(div, opts) {

    var map = new oldMapConstructor(div, opts);

    window.allMaps.push(map);

    return map;

  };

</script>

... but before the website's JavaScript.

<script type="text/javascript">

new google.maps...

</script>

window.allMaps should contain all the instantiated maps on the page.

--
http://twitter.com/broady

[Rossko]

> For my extension I want to get at the Map object(s) for any page with one or
> maps on it

I'm reading that as "I want my extension to 'hijack' maps on arbritary
webpages"
I don't think Chris' method will work as it relies on the webpage/
script permitting access

[Chris Broadfoot]

It'll work! I wrote a similar extension that forces WebGL StreetView:

https://github.com/broady/ForceWebGL

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

--
http://twitter.com/broady

[Sam Dutton]

Hi Chris -- ingenious...  I haven't tried your solution yet, but I noticed you can set the content_scripts value for run_at to document_start: see http://code.google.com/chrome/extensions/content_scripts.html.

Rossko -- ''I'm reading that as "I want my extension to 'hijack' maps on arbritary webpages" -- I agree it does sound dodgy, but what I'm attempting is benign: a better Google Maps print function.

Sam

[Sam Dutton]

I got this working, based on Chris's example -- see Chrome extension content script below. Thanks Chris!

Not sure if I'd implement this in a published extension though: I feel uncomfortable (as Rossko suggests) 'hijacking' the constructor, even if my intentions are benevolent.

Sam

..................................................

var toExecute = function() {

window.allMaps = [];

window.oldMapConstructor = google.maps.Map;

google.maps.Map = function(div, opts) {

console.log("calling map constructor");

console.log(div);

console.log(opts);

var map = new oldMapConstructor(div, opts);

window.allMaps.push(map);

google.maps.event.addListener(map, "bounds_changed", function() {

var bounds = map.getBounds();

var northEast = bounds.getNorthEast().toString();

var southWest = bounds.getSouthWest().toString();

console.log("contenscript.js, northEast: " + northEast + 

", southWest: " + southWest);

});

return map;

};

};

function createScript() {

  var script = document.createElement('script');

  script.innerHTML = '(' + toExecute + ')()';

  return script;

}

window.addEventListener('DOMContentLoaded', function() {

  var scripts = document.getElementsByTagName('script');

  for (var i = 0, script; script = scripts[i]; i++) {

    if (/maps.google.com/.test(script.src)) {

      console.log('Reimplementing map constructor');

      script.nextSibling && script.parentNode.insertBefore(createScript(), script.nextSibling);

      break;

    }

  }

});

[Adam Schneider]

1. How do you see console.log with an extenstion that does not have a
background or popup page?

2. What does this line of code do?
if (/maps.google.com/.test(script.src)) {

3, after i get the map object, how can a add an event listener using
the map object

I asks these questions because I am not sure if it is working.

[Chris Broadfoot]

On Fri, Jul 8, 2011 at 10:12 PM, Adam Schneider <amyho...@gmail.com> wrote:

1. How do you see console.log with an extenstion that does not have a
background or popup page?

You should see it in the console of the current page.

 

2. What does this line of code do?

if (/maps.google.com/.test(script.src)) {

/maps.google.com/ is equivalent of new Regex("maps.google.com")

 

3, after i get the map object, how can a add an event listener using

the map object

http://code.google.com/apis/maps/documentation/javascript/reference.html#event

Chris