Google maps API v3 (still tainted with proxy and markers missing)

Hello,

I managed to make this partially work with google maps. I’m also using a proxy I wrote in Ruby (Rails).

Here’s the code of my proxy (it’s very basic and it’s actually a controller action within my application):

class ProxyController < ApplicationController
  def get_image
    url = URI.parse(params[:url] || "")
    callback = params[:callback]

    response = Net::HTTP.start(url.host, use_ssl: true, verify_mode: OpenSSL::SSL::VERIFY_NONE) do |http|
      http.get url.request_uri
    end

    bin_body = response.body

    base64 = [bin_body].pack("m0")
    responseData = 'data:' + response.header.content_type + ';base64,' + base64

    output = "#{callback}(#{responseData.to_json})"
    send_data output, type: 'application/javascript', disposition: 'inline'
  end
end

I’m pretty sure the proxy is working because I’m getting the same output as the one in node.js.

This is the JS that I use to render the canvas

$("a.export-map").click ->
  html2canvas $("div#map"),
    proxy: "/proxy/get"
    onrendered: (canvas) ->
      console.log(canvas.toDataURL())
  false

Now, It kinda works… I’m attaching the output of the function as well as how it should be.

This is my result:

This is how it should be:

As you can see, some thing are missing. Like the marker and the left side controls.

Also I’m getting between 3 and 4 console errors when I try to convert. The errors are always the same:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. html2canvas.js?body=1:2735
    safeImage html2canvas.js?body=1:2735
    renderItem html2canvas.js?body=1:2769
    (anonymous function) html2canvas.js?body=1:2819
    _html2canvas.Renderer html2canvas.js?body=1:2562
    options.complete html2canvas.js?body=1:2677
    start html2canvas.js?body=1:2209
    img.onload

[btoueg]

Have you tried setting optimized: false in the markers options?

It will make google maps render every marker as a DOM element, thus enabling html2canvas to find them and render them.

Worked for me.

[TehNrd]

@btoueg This saved me hours of frustration, thank you! When optimized is set to true google maps will still render the actual dom elements up to a certain number of makers. Was this number is passed, around 200, it will then convert the images to canvas elements that prevent the markers from rendering.

I loop through all of the markers and set optimized to false, grab the screenshot, and then set optimized back to true. It seems to be working well.