Static Google Map Maker with AngularJS

app.js

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 =
    [
    "tiny", 
    "small", 
    "mid"
  ];
  $scope.mapTypes =
    [
    "roadmap", 
    "terrain", 
    "satellite", 
    "hybrid"
  ];
  $scope.formats =
    [
    "png", 
    "png32", 
    "gif", 
    "jpg",
    "jpg-baseline"
  ];
  
};


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

var mapSrc = $("#map").attr('ng-src');
$("#gimme").html(mapSrc);

index.html

<div ng-controller="controller">
  <h1>Static Map Maker 
    <a href="https://developers.google.com/maps/documentation/staticmaps/"><i class="icon-link"></i> Static Maps API Documentation</a>
    <a href="http://katydecorah.com/staticmapmaker"><i class="icon-link"></i> katydecorah.com/staticmapmaker</a>
  </h1>
  <div class="controls">
    <div class="container">
      <fieldset>
        <label for="location">Location 
          <i class="icon-question-sign" data-toggle="popover" data-content="{{e.locationAbout}}"></i> 
          <input type="text" ng-model="e.location" id="location">
        </label>
        <label for="api">
          <a href="https://code.google.com/apis/console/" target="_blank">API Key</a> 
          <i class="icon-question-sign" data-toggle="popover" data-content="{{e.APIAbout}}"></i> 
          <input type="text" ng-model="e.API" id="api" placeholder="API Key"></label>
      </fieldset>
      
      
      <fieldset>
        <label for="zoom">Zoom 
          <input type="range" name="input" ng-model="e.zoom" min="{{e.minZoom}}" max="{{e.maxZoom}}" id="zoom">
        </label>
        
        <label for="scale">Scale (2x) 
          <i class="icon-question-sign" data-toggle="popover" data-content="{{e.scaleAbout}}"></i> 
          <input type="checkbox" ng-model="scale" ng-true-value="2" ng-false-value="1" id="scale" ng-init="scale='false'">
        </label>
        
        <label for="width"> Width 
          <i class="icon-question-sign" data-toggle="popover" data-content="{{e.sizeAbout}}"></i>
          <input type="number" ng-model="e.width" min="0" max="{{e.maxSize}}" id="width">
        </label>
        
        <label for="height"> 
          Height <i class="icon-question-sign" data-toggle="popover" data-content="{{e.sizeAbout}}"></i> 
          <input type="number" ng-model="e.height" min="0" max="{{e.maxSize}}" id="height"> 
        </label>
      </fieldset>
      
      
      
      <fieldset>   
        <label for="showMarker"> Map Marker
          <input type="checkbox" ng-model="showMarker" ng-true-value="true" ng-false-value="false" id="showMarker">
        </label>
        
        <ng-switch on="showMarker">
          <ng-switch ng-switch-when="true">
            <label for="markerColor"> Marker Color
              <select ng-model="e.markerColor"
                ng-options="color for color in colors" id="markerColor">
              </select>
            </label>
            <label for="markerSize"> Marker Size
              <select ng-model="e.markerSize"
                ng-options="markerSize for markerSize in markerSizes" id="markerSize">
              </select>
            </label>
          </ng-switch>
        </ng-switch>
        
        
        
        
        
      </fieldset>
      
      
      <fieldset>   
        <label for="mapType"> Map Type
          <select ng-model="e.mapType"
            ng-options="mapType for mapType in mapTypes" id="mapType">
          </select>
        </label>
        <label for="format"> Format
          <select ng-model="e.format"
            ng-options="format for format in formats" id="format">
          </select>
        </label>
        <label for="visual"> Visual Refresh
          <input type="checkbox" ng-model="visual" ng-true-value="true" ng-false-value="false" ng-init="visual='true'" id="visual">
        </label>
      </fieldset>
      
      <fieldset>
        <label for="gimme">Gimme  <i class="icon-question-sign" data-toggle="popover" data-content="{{e.gimmeAbout}}"></i>
          <textarea id="gimme"></textarea>
        </label>
      </fieldset>
    </div>
  </div>
  
  <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="" class="map" id="map">
  </div>
</div>

style.css

$bg: #f1f1f1;
$orange:#f99d24;
$textColor:#222;
* {
  @include box-sizing(border-box);
}
html {
  width:100%;
  height:100%;
}
body {
  background:$bg;
  font-size:90%;
  color:$textColor;
  font-family: 'Raleway', sans-serif;
  width:100%;
  height:100%;
  min-height:100%;
  @include display-box; 
  @include box-align(center);
  @include box-pack(center);
}

input, select, textarea {
  font-family: 'Raleway', sans-serif;
  background:rgba(white,0.65);
  border:none;
  padding:0.35em 0.5em;
  margin:0;
  float:right;
  position:relative;
}
input[type=text],select, input[type=number]{
  font-size:1em;
}
input[type=range] {
  width:7em;
  &:before, &:after {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased; 
    position:absolute;
    font-size:1.2em;
    color:rgba(#222,0.1);
    top:0.3em;
  }
  &:before {
    content:"\f010";
    left:-1em;
  }
  &:after {
    content:"\f00e";
    right:-1em;
  }
}
input[type=checkbox] { margin-top:0.5em;}

h1 {
  position:absolute;
  top:0.5em;
  right:0.5em;
  font-size:3em;
  font-weight:bold;
  color:rgba($textColor,0.3);
  a {
    font-size:0.3em;
    display:block;
    color:rgba($textColor,0.3);
    text-align:right;
    text-transform:uppercase;
    margin-top:0.5em;
  }
}
label {
  display:block;
  margin-bottom:0.5em;
  font-weight:bold;
  vertical-align:middle;
  line-height:2;
  padding:0.2em;
}
a {
  text-decoration:none;
  color:complement($orange);
  &:hover {color:$orange;}
}

textarea {
  width:100%;
  min-height:7em;
}

fieldset {
  padding:1em 0;
  margin:0 0 0.5em;
  padding:1em;
  width:100%;
  display:block;
  border-radius:0.2em;
  border:1px solid #e3e3e3;
  background:rgba(#f5f5f5,0.8);
  border-radius:0.25em;
}

.controls {
  width:22em;
  min-height:100%;
  padding:0.5em 0.7em;
  position:absolute;
  z-index:100;
  top:0;
  left:0;
}
.static {
  width:100%;
  .map {
    display:block;
    margin:1em auto;
    @include transition(all 1s linear);
  }
}

[data-toggle=popover]{
  cursor:help;
  color:lighten($textColor,50%);
  @include transition(color .5s);
  &:hover {
    color:$textColor;
    @include transition(color .5s);
  }
}

//
// Popovers
// --------------------------------------------------

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  background-color: #ffffff;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  white-space: normal;
}

.popover.right {
  margin-left: 10px;
}

.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 1em;
  font-weight: normal;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.popover-title:empty {
  display: none;
}
.popover-content {
  padding: 9px 14px;
  color:#222;
  font-weight:400;
  font-size:0.9em;
  line-height:1.6;
}
.popover .arrow,
.popover .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover .arrow {
  border-width: 11px;
}
.popover .arrow:after {
  border-width: 10px;
  content: "";
}
.popover.right .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, 0.25);
}
.popover.right .arrow:after {
  left: 1px;
  bottom: -10px;
  border-left-width: 0;
  border-right-color: #ffffff;
}


.twitter-share-button {
  margin-top:0.2em;
}

@media (max-width:40em) {
  .pull-right,.pull-left {float:none !important;}
  h1 {
    position:relative;
    text-align:center;
    margin-bottom:1em;
    a {text-align:center;}

  }
  .controls {
    width:100%;
    position:relative;
  }
  .map {max-width:100%;}
}

@media (max-width:30em) {
  h1 {
    font-size:2em;
    a {font-size:0.5em;}
  }
}