javascript - How to insert a Google map in a webpage using GreaseMonkey?

Question

Nothing I've tried seems to work. I found these two links and thought they'd be helpful, but that hasn't worked either. Dynamically load JavaScript with JavaScript https://developers.google.com/loader/

Here's roughly what my Greasemonkey script looks like currently:

var init_map = function() {
    new google.maps.Geocoder().geocode({address:'1125 NW 12th Ave, Portland, OR'},function(result){
        alert(result);
    });
}

function loadMaps() {
    GM_log("loadMaps called");
    google.load("maps", "3", {"callback" : init_map, "other_params":"key=foo&sensor=false"});
}

function loadScript(filename,callback){
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.onload = callback;
  fileref.setAttribute("src", filename);
  if (typeof fileref!="undefined"){
    document.getElementsByTagName("head")[0].appendChild(fileref);
  }
}

$(document).ready(
    function() {
        GM_log("document ready");
        loadScript('http://www.google.com/jsapi?key=ABQIAAAAfoo',function(){
            loadMaps();
        });
    }
);

I've found that if I don't include // @require http://www.google.com/jsapi?key=ABQIAAAAfoo in the Greasemonkey script, I get a google is undefined error. If I do include it, init_map() never gets called. Any suggestions?

Answer 1

var init_map defines a local variable in the GreaseMonkey context.

If you want to run JavaScript in the context of a webpage, I recommend to inject two <script> tags in the web page (another method is to prefix all of your global variables with unsafeWindow.):

1. Google's map API
2. Your script.

Example:

// ==UserScript==
// @name           Name of script
// @namespace      YourNameSpaceHere
// @match          http://blabla.com/*
// @version        1.0
// @run-at         document-end
// ==/UserScript==
var head = document.head || document.documentElement;

var script = document.createElement('script');
script.src = 'http://www.google.com/jsapi?key=ABQIAAAAfoo';
head.appendChild(script);

var script2 = document.createElement('script');
script2.textContent = '... code here ..';
head.appendChild(script2);

// Clean-up:
script.parentNode.removeChild(script);
script2.parentNode.removeChild(script2);

E4X instead of a plain string

The easiest option to embed a string of JavaScript code in your GreaseMonkey script, without escaping quotes and newlines is to use the E4X format:

script2.textContent = <x><![CDATA[ 
alert("test");
]]></x>.toString();