cadecairos/gist:1113925

## gistfile1.html
<html>
  <head>
  <script src="../../../src/butter.js" ></script>
  <script src="../../../src/modules/butter.comm.js" ></script>
    <script src="../../../../popcorn-js/popcorn.js" ></script>
    <script>
      var googleCallback;
      var i = 1,
        _mapFired = false,
        _mapLoaded = false,
        geocoder, loadMaps;

      //google api callback
      googleCallback = function (data) {
        // ensure all of the maps functions needed are loaded
        // before setting _maploaded to true
        if (typeof google !== "undefined" && google.maps && google.maps.Geocoder && google.maps.LatLng) {
          geocoder = new google.maps.Geocoder();
          _mapLoaded = true;
        } else {
          setTimeout(function () {
            googleCallback(data);
          }, 1);
        }
      };
      // function that loads the google api
      loadMaps = function () {
        // for some reason the Google Map API adds content to the body
        if (document.body) {
          _mapFired = true;
          Popcorn.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=googleCallback");
        } else {
          setTimeout(function () {
            loadMaps();
          }, 1);
        }
      };

      document.addEventListener( "DOMContentLoaded", function (e) {

        butter = new Butter();

        client = new Butter.CommClient( "customEditorDemo" );

        client.listen( "edittrackevent", function( message ) {
          console.log(message);
          construct ( message.trackEvent );
        });

      }, false);

      var construct = function( trackEvent ) {

        var newdiv, map, location,
            target = document.getElementById( "custom-editor-target" );

        // if this is the firest time running the plugins
        // call the function that gets the sctipt
        if (!_mapFired) {
          loadMaps();
        }

        // create a new div this way anything in the target div is left intact
        // this is later passed on to the maps api
        newdiv = document.createElement("div");
        newdiv.id = "actualmap" + i;
        newdiv.style.width = "100%";
        newdiv.style.height = "85%";
        i++;

        target.appendChild( newdiv )

        // ensure that google maps and its functions are loaded
        // before setting up the map parameters
        var isMapReady = function () {
          if (_mapLoaded) {
            if (trackEvent.popcornOptions.location) {
              // calls an anonymous google function called on separate thread
              geocoder.geocode({
                "address": trackEvent.popcornOptions.location
              }, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                  trackEvent.popcornOptions.lat = results[0].geometry.location.lat();
                  trackEvent.popcornOptions.lng = results[0].geometry.location.lng();
                  location = new google.maps.LatLng(trackEvent.popcornOptions.lat, trackEvent.popcornOptions.lng);
                  map = new google.maps.Map(newdiv, {
                    mapTypeId: google.maps.MapTypeId[trackEvent.popcornOptions.type] || google.maps.MapTypeId.HYBRID
                  });
                  map.getDiv().style.display = "block";
                }
              });
            } else {
              location = new google.maps.LatLng(trackEvent.popcornOptions.lat, trackEvent.popcornOptions.lng);
              map = new google.maps.Map(newdiv, {
                mapTypeId: google.maps.MapTypeId[trackEvent.popcornOptions.type] || google.maps.MapTypeId.HYBRID
              });
              map.getDiv().style.display = "block";
            }

            var show = function() {
              if ( map ) {
                map.getDiv().style.display = "block";
                // reset the location and zoom just in case the user plaid with the map
                google.maps.event.trigger(map, 'resize');
                map.setCenter( location );

                // make sure options.zoom is a number
                if ( trackEvent.popcornOptions.zoom && typeof trackEvent.popcornOptions.zoom !== "number" ) {
                  trackEvent.popcornOptions.zoom = +trackEvent.popcornOptions.zoom;
                }

                trackEvent.popcornOptions.zoom = trackEvent.popcornOptions.zoom || 8; // default to 8

                map.setZoom( trackEvent.popcornOptions.zoom );

                var parent = map.getDiv().parentNode,
                  submit = document.createElement("input");

                submit.value = "Submit Data to Event Editor Module";
                submit.type = "button";
                submit.addEventListener( "click", function() {
                  var latlng = map.getCenter(),

                  popcornOptions = {
                    zoom: map.getZoom(),
                    lat: latlng.lat(),
                    lng: latlng.lng(),
                    type: map.getMapTypeId().toUpperCase(),
                    start: trackEvent.popcornOptions.start,
                    end: trackEvent.popcornOptions.end
                  };

                  client.send( popcornOptions, "okayclicked" );

                }, false );
                parent.appendChild( submit);


              } else {
                setTimeout(function() {
                  show();
                }, 5);
              }
            };

            show();

          } else {
              setTimeout(function () {
                isMapReady();
              }, 5);
            }
          };

        isMapReady();
      }

    </script>
  </head>
  <body>
  <div id="custom-editor-target" style="width: 300px; height: 300px"></div>
  </body>
</html>
	<html>
	<head>
	<script src="../../../src/butter.js" ></script>
	<script src="../../../src/modules/butter.comm.js" ></script>
	<script src="../../../../popcorn-js/popcorn.js" ></script>
	<script>
	var googleCallback;
	var i = 1,
	_mapFired = false,
	_mapLoaded = false,
	geocoder, loadMaps;

	//google api callback
	googleCallback = function (data) {
	// ensure all of the maps functions needed are loaded
	// before setting _maploaded to true
	if (typeof google !== "undefined" && google.maps && google.maps.Geocoder && google.maps.LatLng) {
	geocoder = new google.maps.Geocoder();
	_mapLoaded = true;
	} else {
	setTimeout(function () {
	googleCallback(data);
	}, 1);
	}
	};
	// function that loads the google api
	loadMaps = function () {
	// for some reason the Google Map API adds content to the body
	if (document.body) {
	_mapFired = true;
	Popcorn.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=googleCallback");
	} else {
	setTimeout(function () {
	loadMaps();
	}, 1);
	}
	};

	document.addEventListener( "DOMContentLoaded", function (e) {

	butter = new Butter();

	client = new Butter.CommClient( "customEditorDemo" );

	client.listen( "edittrackevent", function( message ) {
	console.log(message);
	construct ( message.trackEvent );
	});

	}, false);

	var construct = function( trackEvent ) {

	var newdiv, map, location,
	target = document.getElementById( "custom-editor-target" );

	// if this is the firest time running the plugins
	// call the function that gets the sctipt
	if (!_mapFired) {
	loadMaps();
	}

	// create a new div this way anything in the target div is left intact
	// this is later passed on to the maps api
	newdiv = document.createElement("div");
	newdiv.id = "actualmap" + i;
	newdiv.style.width = "100%";
	newdiv.style.height = "85%";
	i++;

	target.appendChild( newdiv )

	// ensure that google maps and its functions are loaded
	// before setting up the map parameters
	var isMapReady = function () {
	if (_mapLoaded) {
	if (trackEvent.popcornOptions.location) {
	// calls an anonymous google function called on separate thread
	geocoder.geocode({
	"address": trackEvent.popcornOptions.location
	}, function (results, status) {
	if (status === google.maps.GeocoderStatus.OK) {
	trackEvent.popcornOptions.lat = results[0].geometry.location.lat();
	trackEvent.popcornOptions.lng = results[0].geometry.location.lng();
	location = new google.maps.LatLng(trackEvent.popcornOptions.lat, trackEvent.popcornOptions.lng);
	map = new google.maps.Map(newdiv, {
	mapTypeId: google.maps.MapTypeId[trackEvent.popcornOptions.type] \|\| google.maps.MapTypeId.HYBRID
	});
	map.getDiv().style.display = "block";
	}
	});
	} else {
	location = new google.maps.LatLng(trackEvent.popcornOptions.lat, trackEvent.popcornOptions.lng);
	map = new google.maps.Map(newdiv, {
	mapTypeId: google.maps.MapTypeId[trackEvent.popcornOptions.type] \|\| google.maps.MapTypeId.HYBRID
	});
	map.getDiv().style.display = "block";
	}

	var show = function() {
	if ( map ) {
	map.getDiv().style.display = "block";
	// reset the location and zoom just in case the user plaid with the map
	google.maps.event.trigger(map, 'resize');
	map.setCenter( location );

	// make sure options.zoom is a number
	if ( trackEvent.popcornOptions.zoom && typeof trackEvent.popcornOptions.zoom !== "number" ) {
	trackEvent.popcornOptions.zoom = +trackEvent.popcornOptions.zoom;
	}

	trackEvent.popcornOptions.zoom = trackEvent.popcornOptions.zoom \|\| 8; // default to 8

	map.setZoom( trackEvent.popcornOptions.zoom );

	var parent = map.getDiv().parentNode,
	submit = document.createElement("input");

	submit.value = "Submit Data to Event Editor Module";
	submit.type = "button";
	submit.addEventListener( "click", function() {
	var latlng = map.getCenter(),

	popcornOptions = {
	zoom: map.getZoom(),
	lat: latlng.lat(),
	lng: latlng.lng(),
	type: map.getMapTypeId().toUpperCase(),
	start: trackEvent.popcornOptions.start,
	end: trackEvent.popcornOptions.end
	};

	client.send( popcornOptions, "okayclicked" );

	}, false );
	parent.appendChild( submit);


	} else {
	setTimeout(function() {
	show();
	}, 5);
	}
	};

	show();

	} else {
	setTimeout(function () {
	isMapReady();
	}, 5);
	}
	};

	isMapReady();
	}

	</script>
	</head>
	<body>
	<div id="custom-editor-target" style="width: 300px; height: 300px"></div>
	</body>
	</html>