Google Static Map Maker
How do I make an google static map maker?
Http://staticmapmaker.comType in a location, customize, and get the map. The Static Maps API does not always require an API key, but to avoid getting the 'over the limit error image', you should get a key. . What is a google static map maker? How do you make a google static map maker? This script and codes were developed by Katy DeCorah on 28 July 2022, Thursday.
Google Static Map Maker - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Static Map Maker</title> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oxygen+Mono' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://staticmapmaker.com/css/main.css'> <link rel="stylesheet" href="css/style.css">
</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="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><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]]"></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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Google Static Map Maker - Script Codes CSS Codes
/*
To see the Sass, check out: https://github.com/katydecorah/staticmapmaker
(I'm too lazy to maintain it here ;-))
*/
Google Static Map Maker - Script Codes JS Codes
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'
});
Developer | Katy DeCorah |
Username | katydecorah |
Uploaded | July 28, 2022 |
Rating | 4.5 |
Size | 4,072 Kb |
Views | 64,768 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Google Font Explorer | 4,632 Kb |
Build a store locator with Mapbox.js | 3,951 Kb |
Twinner Spinner II | 2,974 Kb |
Wave | 4,072 Kb |
Snowflaker 2016 | 3,541 Kb |
Combination Lock | 7,587 Kb |
Haml Calendar | 5,643 Kb |
Rabbit by Beard Chicken | 5,165 Kb |
Twinner Spinner | 2,971 Kb |
Accordion Nav | 4,490 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!