CodePen

HTML

            
              <body ng-app="myApp">
<input type="checkbox" class="toggle" id="toggle">
<header class="col col-right">
  <h1><i class="fa fa-map-marker"></i> Static Map Maker</h1>
  <a href="http://staticmapmaker.com/" class="link">http://staticmapmaker.com</a>
</header>

<div class="main" ng-controller="controller">
<div class="col-left col">
<label for="toggle" class="label-toggle">
<span class="close-it"><span class="fa fa-arrow-circle-left"></span></span>
<span class="open-it"><span class="fa fa-arrow-circle-right"></span></span>
</label>

<div class="controls">
<div class="container">
<form>
<fieldset>
<div class="form-group">
<label for="location" class="cushion">Location <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.locationAbout]]"></i></label>
<div class="form-control"><input type="text" ng-model="e.location" id="location"></div>
</div>
<div class="form-group">
<label for="api" class="cushion">
<a href="https://code.google.com/apis/console/" target="_blank">API Key</a>
<i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.APIAbout]]"></i></label>
<div class="form-control"><input type="text" ng-model="e.API" id="api" placeholder="API Key"></div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="zoom">Zoom</label>
<div class="form-control"><input type="range" name="input" ng-model="e.zoom" min="[[e.minZoom]]" max="[[e.maxZoom]]" id="zoom"></div>
</div>
<div class="form-group">
<label for="scale">Scale (2x) <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.scaleAbout]]"></i>
</label>
<div class="form-control"><input type="checkbox" ng-model="scale" ng-true-value="2" ng-false-value="1" id="scale" ng-init="scale='false'"></div>
</div>
<div class="form-group">
<label for="width" class="cushion">Width <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i></label>
<div class="form-control"><input type="number" ng-model="e.width" min="0" max="[[e.maxSize]]" id="width"></div>
</div>
<div class="form-group">
<label for="height" class="cushion">Height <i class="fa fa-question-circle" data-toggle="popover" data-content="[[e.sizeAbout]]"></i>
</label>
<div class="form-control"><input type="number" ng-model="e.height" min="0" max="[[e.maxSize]]" id="height"></div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="showMarker">Map Marker</label>
<div class="form-control"><input type="checkbox" ng-model="showMarker" ng-true-value="true" ng-false-value="false" id="showMarker"></div>
</div>
<ng-switch on="showMarker">
<ng-switch ng-switch-when="true">
<div class="form-group">
<label for="markerColor"> Marker Color</label>
<div class="form-control"><select ng-model="e.markerColor"
ng-options="color for color in colors" id="markerColor">
</select></div>
</div>
<div class="form-group">
<label for="markerSize"> Marker Size</label>
<div class="form-control"><select ng-model="e.markerSize"
ng-options="markerSize.value as markerSize.text for markerSize in markerSizes" id="markerSize">
</select></div>
</div>
</ng-switch>
</ng-switch>
</fieldset>
<fieldset>
<div class="form-group">
<label for="mapType"> Map Type</label>
<div class="form-control"><select ng-model="e.mapType"
ng-options="mapType for mapType in mapTypes" id="mapType">
</select></div>
</div>
<div class="form-group">
<label for="format"> Format</label>
<div class="form-control"><select ng-model="e.format"
ng-options="format for format in formats" id="format">
</select></div>
</div>
<div class="form-group">
<label for="visual"> Visual Refresh</label>
<div class="form-control"><input type="checkbox" ng-model="visual" ng-true-value="true" ng-false-value="false" ng-init="visual='true'" id="visual"></div>
</div>
</fieldset>
</form>
</div>
</div>

</div>
<div class="col-right col">
<div class="static">

<img ng-src="http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[e.location]]" class="static-map" id="map">

</div>
<div class="tabs">
<form>
<input id="code" name="tab" type="radio" class="tab-input" checked>
<label for="code" class="tab-link">Code</label>
<div id="tab-code" class="tab"><pre class="print-code">
http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[e.location]]
</pre></div>
<input id="usage" name="tab" type="radio" class="tab-input">
<label for="usage" class="tab-link">Usage</label>
<div id="tab-usage" class="tab">
<p>You can place the code in an <code>img</code> tag or use it as a <code>background-image</code>.</p>
<h2>HTML</h2>
<pre>&lt;img src="http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]" alt="Google Map of [[e.location]]"&gt;</pre>
<h2>CSS</h2>
<pre>
  {
    background-image: url(http://maps.googleapis.com/maps/api/staticmap?center=[[e.location.split(' ').join('+')]]&zoom=[[e.zoom]]&scale=[[scale]]&size=[[e.width]]x[[e.height]]&maptype=[[e.mapType]]&sensor=false[[ e.API !== '' && '&key='+e.API || '' ]]&format=[[e.format]]&visual_refresh=[[visual]][[ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' ]]);
  }
</pre>
</div>
</form>
<p class="colophon">Made by <a href="http://katydecorah.com/">Katy DeCorah</a>. Powered by Jekyll and Angular, hosted on <a href="https://github.com/katydecorah/staticmapmaker">Github</a>.</p>
</div>

</div>
</div>
  </body>
            
          
!

CSS

            
              /*

To see the Sass, check out: https://github.com/katydecorah/staticmapmaker
(I'm too lazy to maintain it here ;-))

*/
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var myApp = angular.module('myApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

var controller = function($scope) {
  $scope.e = {
    location:"Albany, NY",
    locationAbout:"Try an address, a city, a place, or even latitude and longitude.",
    API:"",
    APIAbout:"You don't always need an API Key for Static Maps, but it's easy to acquire one. Without a key you might receive an error image instead of a map. Follow the link to the API Console.",
    zoom:13,
    minZoom:0,
    maxZoom:22,
    scaleAbout:"Scale will double the stated height and width. This is good for when you need a width or height larger than 640px.",
    width:600,
    height:300,
    maxSize:640,
    sizeAbout:"Max is 640px or 1280px when scale 2x.",
    markerColor: "red",
    mapType: "roadmap",
    format:"png",
    markerSize:"mid",
    gimmeAbout:"Treat this like a regular image. Pop it into an img tag or use as a background-image."
  };
  $scope.colors =
    [
    "black",
    "brown",
    "green",
    "purple",
    "yellow",
    "blue",
    "gray",
    "orange",
    "red",
    "white"
  ];
  $scope.markerSizes =
    [
    { "value": "tiny", "text": "small" },
    { "value": "small", "text": "medium" },
    { "value": "mid", "text": "large" }
  ];
  $scope.mapTypes =
    [
    "roadmap",
    "terrain",
    "satellite",
    "hybrid"
  ];
  $scope.formats =
    [
    "png",
    "png32",
    "gif",
    "jpg",
    "jpg-baseline"
  ];

};


$("[data-toggle=popover]").popover({
  placement : 'right',
  trigger:'hover'
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................