"map"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/katydecorah/pen/Klieu?limit=all&page=43&q=app" /> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen+Mono' rel='stylesheet' type='text/css'> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel='stylesheet prefetch' href="https://staticmapmaker.com/css/main.css"> <style class="cp-pen-styles">/* To see the Sass, check out: https://github.com/katydecorah/staticmapmaker (I'm too lazy to maintain it here ;-)) */</style></head><body> <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="https://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"> https://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><img src="https://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> <h2>CSS</h2> <pre> { background-image: url(https://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> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script><script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> <script >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' }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: