Bootstrap Modal with Google Maps with Canvas2HTML equals grey background - google-maps

Question

So I'm trying to use Google Maps by decoding GPS data from a mobile device and then generates a map route out of it. Using the Static Maps API, I can sort of approximate a trip, but the data gets generated every 1-5 seconds, which is far beyond the amount of information you can send over a GET request to Google Maps.
So my JavaScript map looks like this running a webpage:
Edited: DropBox does not apparently persistently store photo links persistently, switching to OneDrive.
Should look like http://bit.ly/1tjxg6u
Which is glorious. I figured that if I used html2Canvas, I could generate a screenshot of the map, and transfer that file onto another portion of my server, or URI encode it. But when I tried that, I get this instead.
Does Look Like http://bit.ly/1jlrOvL
Not glorious at all. I then checked out rasterHTML. But it gave me an error when I used rasterizeHTML.drawDocument of "cannot get innerHTML of undefined" when I call modalMap, (see JavaScript code below). It does let me get the HTML and use drawHTML of the exact same element using .innerHTML. No idea why. Using HTML, that gets me this result:
All Three together http://bit.ly/1ssxIet
rasterizeHTML is in the lower-right. html2Canvas is the lower-left. I'm sort of stuck halfway between on both.
Edited: After doing a lot of testing, the error is:
html2canvas: Error loading ":http://mt0.googleapis.com/vt?...
The URL does show the image when you click on it in the console, but HTML2canvas can't display it. I'm not sure if it's a URL encoding problem or what.
I enabled CORS in my headers, Apache, and the .htaccess just in case that was the issue. I then downloaded the .php proxy file and tried that, just in case that was the issue. Neither worked.
The javascript code:
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
// Try RasterizeHTML
var modalMap = document.getElementById('mainPageCanvas');
var modalMapHTML = modalMap.innerHTML;
var canvasHolder = document.getElementById('rasterizeHTML');
console.log(modalMap);
console.log(canvasHolder);
var options = {
width : 1000,
height : 400,
executeJs : false,
zoom: 2
};
rasterizeHTML.drawHTML(modalMapHTML, canvasHolder)
.then(function success(renderResult) {
console.log(renderResult);
}, function error(e) {
console.log(e);
}.deb());
html2canvas(document.getElementById('mainPageCanvas'), {
proxy: "//localhost:85/ormc/consumer/build/ajax/php/html2canvasproxy.php",
useCORS: true,
allowTaint:true,
logging: true,
onrendered: function(canvas) {
canvas.setAttribute('crossOrigin','anonymous');
$('#secondaryPageCanvas').replaceWith(canvas);
console.log("Canvas function called");
}.deb()
});
}.deb());
Now if I attempt to do a dataUrl conversion, I get this: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
The HTML is just:
<div id="mainPageCanvas" style="width:1000px;height:400px;"></div>
<div id='secondaryPageCanvas' style="width:1000px;height:400px;"></div>
<canvas id='rasterizeHTML' style='width:1000px;height:400px;'>
My headers being sent are:
Access-Control-Allow-Methods:OPTIONS, GET
Access-Control-Allow-Origin:*
Access-Control-Request-Method:*
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Just to see if anything is triggering the CSP (It's report only), but nothing is throwing it. So, what am I doing wrong?