After customizing the map you want, you will be given a generated code snippet that looks something like this:

HTML<div id="map_canvas_custom_48259" style="width:830px; height:350px" ></div>
<script type="text/javascript">
  // Line breaks inserted for readability.
  (function(d, t) {
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = "";
    s.parentNode.insertBefore(g, s);
  }(document, "script"));
<a class="mapgen-link" style="font:8px Arial;text-decoration:none;color:#5C5C5C;text-align: right; display: block; width: 830px;" href=""></a>

Basic Solution

If you only have one map on a single page of your application, you can get away with just adding the following to your application JS:

COFFEESCRIPT$(document).bind 'page:load', ->
  initializeMgMaps() if $('#mggapiloader')?

Advanced Solution

This solution handles multiple maps on the same page or on separate pages of the application.

  1. Add a class to the script tag for each map you have in your application.

    HTML<script class="init_map_generator" type="text/javascript">
  2. In your application JS, create a function to unload/remove Google Maps and bind it to both the page:fetch and page:restore events.

    COFFEESCRIPT$(document).bind 'page:fetch', ->
    $(document).bind 'page:restore', ->
      cleanMapGenerator true
    cleanMapGenerator = (init) ->
      window.mapObjWrapper = undefined = undefined
      window.eval initMapGenerator.text() if init and (initMapGenerator = $('script.init_map_generator'))?

Related Issues: #156

Credit: Nick Reed

All solutions should be considered unofficial. There is no guarantee that a given solution will work with your application. If you find that a solution is insufficient, please let me know by submitting an issue on Github.