Skip to content

Instantly share code, notes, and snippets.

@djekl

djekl/Google-Static-Map-Maker.markdown

Created September 24, 2013 06:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save djekl/6681041 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save djekl/6681041 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Alan Wynn.
Raw
Google-Static-Map-Maker.markdown
Raw
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>
Raw
script.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);
Raw
style.scss
@import "compass";
$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;}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment