A Pen by Lavi Perchik.

Google-maps-image-creator.markdown

Google maps image creator

using google maps api to create a static image, rather than an iframe, to embed in your site.

A Pen by Lavi Perchik on CodePen.

License.

index.html

<div class="container">
  <h1>Google maps image creator</h1>
  <p class="lead">Create a static image to embed in your site, instead of an iframe.</p>
  <form action="#" class="form-inline">
    <div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Address
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        <p class="input-append"><input type="text" id="address" placeholder="1600 Amphitheatre Pkwy, Mountain View, CA" class="span8 autofocus" /><button id="update" class="btn btn-primary">Update Map </button></p>
      </div>
    </div> 
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Dimensions and zoom
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
 <p>
      <label for="width">Width:</label>
    <input type="number" id="width" value="560" class="span2" />
      </p>
      <p>
      <label for="height">Height:</label>
    <input type="number" id="height" value="365" class="span2" />
      </p>    
       <p>
      <label for="width">zoom:</label>
    <input type="number" id="zoom" value="15" class="span2" max="22" min="0" />
      </p> 
      </div>
    </div>
  </div>
        <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Language
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
 <p>
      
      <select id="lang" class="span2">
        <option value="en" selected>english</option>
        <option value="fr">french</option>
        <option value="de">german</option>
        <option value="ja">japanese</option>
        <option value="iw">hebrew</option>
      </select> <span class="help-inline">(some languages will not apply everywhere)</span></p>
       </div>
    </div>
  </div>
</div>

  </form>
  <div class="clearfix">
  <div id="result" class="result"><a href="http://maps.google.com/maps?hl=en&amp;q=1600+Amphitheatre+Pkwy%2C+Mountain+View%2C+CA+&amp;ie=UTF8&amp;hq=&amp;hnear=1600+Amphitheatre+Pkwy%2C+Mountain+View%2C+CA+&amp;t=m&amp;z=14&amp;source=embed" id="my_href"><img width="560" height="365" src="http://maps.google.com/maps/api/staticmap?language=en&amp;center=1600+Amphitheatre+Pkwy%2C+Mountain+View%2C+CA+&amp;zoom=15&amp;size=560x365&amp;format=png32&amp;maptype=roadmap&amp;markers=1600+Amphitheatre+Pkwy%2C+Mountain+View%2C+CA+&amp;sensor=false" id="my_src"></a></div>
   <div class="output">
     Right-click+Save-as... OR use this code to embed the map on your site:
     <pre id="output" class="prettyprint lang-ml"></pre>
     
   </div>

  
  </div>
</div>
 

script.js

$(document).ready(function() {
  var myHref = $('#my_href'), 
      mySrc= $('#my_src'),
      output = $('#output'),
      result = $('#result'),
      width = $("#width"),
      height = $("#height"),
      lang = $("#lang"),
      zoom = $("#zoom"),
      address_input = $('#address');
  output.text(result.html());
  
  function updateMaps(){
    if (!address_input.val()) {
      myHref.attr("href") = "";
      mySrc.attr("src") = "";
      return;
    }
    var address = encodeURIComponent(address_input.val()).replace(/%20/g, '+'),
        my_width = width.val(),
        my_height = height.val(),
        my_zoom = zoom.val(),
        my_lang = lang.val(),
        link = 'http://maps.google.com/maps?hl='+my_lang+'&q='+address+'&ie=UTF8&hq=&hnear='+address+'&t=m&z='+my_zoom+'&source=embed',
        img = 'http://maps.google.com/maps/api/staticmap?language='+my_lang+'&center='+address+'&zoom='+my_zoom+'&size='+my_width+'x'+my_height+'&format=png32&maptype=roadmap&markers='+address+'&sensor=false'; 
    myHref.attr("href", link);
    mySrc.attr({ "src" : img, "width" : my_width, "height" : my_height });
    output.text(result.html()); 
  }
  /*address_input.bind('input', function() {
    updateMaps();
  });*/
  $("#update").click(function(){
    updateMaps();
  });
  $("#height, #width").on("blur", function(){
    updateMaps();
  });
  $("#lang, #zoom").on("change", function(){
    updateMaps();
  });
});

/**
* Bootstrap.js by @fat & @mdo
* plugins: bootstrap-collapse.js
* Copyright 2013 Twitter, Inc.
* http://www.apache.org/licenses/LICENSE-2.0.txt
*/
!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning||this.$element.hasClass("in"))return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),a.support.transition&&this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning||!this.$element.hasClass("in"))return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var c=a.fn.collapse;a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=a.extend({},a.fn.collapse.defaults,d.data(),typeof c=="object"&&c);e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a.fn.collapse.noConflict=function(){return a.fn.collapse=c,this},a(document).on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();c[a(e).hasClass("in")?"addClass":"removeClass"]("collapsed"),a(e).collapse(f)})}(window.jQuery)

style.css

textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: consolas, monaco, monospace;
}
.result {
  float: left;
  margin-right: 20px;
}
.output {
  overflow: hidden;
}
@media (max-width: 980px) {
  .result {
    float: none;
    margin-bottom: 20px;
  }
}
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}
pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}