Skip to content

Instantly share code, notes, and snippets.

@Saoneth

Saoneth/generate.js

Last active June 9, 2017 15:47
Show Gist options
  • Save Saoneth/4395856c213d7833125488e2c58f37a1 to your computer and use it in GitHub Desktop.
Save Saoneth/4395856c213d7833125488e2c58f37a1 to your computer and use it in GitHub Desktop.
Download ZIP
Static Google Map
Raw
generate.js
#!/usr/bin/env phantomjs
var page = require('webpage').create(),
system = require('system'),
args = system.args;
if (args.length !== 4) {
console.log('Usage: ' + args[0] + ' ID WIDTHxHEIGHT LOCATION');
phantom.exit();
}
var tmp = args[2].split('x');
page.viewportSize = {
width: tmp[0],
height: tmp[1]
};
page.onCallback = function(data) {
if(data !== 'mapReady')
return;
window.setTimeout(function() {
console.log("Rendering to file...");
page.render(args[1] + '.png');
phantom.exit();
}, 200);
};
page.open('https://rawgit.com/Saoneth/4395856c213d7833125488e2c58f37a1/raw/map.html?q=' + encodeURIComponent(args[3]), function(status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
}
});
Raw
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<style>
* {
transition: none !important;
}
html {
height: 100%
}
html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}
.gm-style > .gm-style-cc {
display: none !important;
}
.gmnoprint {
right: 0px !important;
}
</style>
<script>
var urlParams;
(window.onpopstate = function() {
var match, pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function(s) {
return decodeURIComponent(s.replace(pl, " "));
},
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query)) urlParams[decode(match[1])] = decode(match[2]);
})();
</script>
<script>
var loaded = false;
function mapReady() {
if(!loaded) {
loaded = true;
return;
}
setTimeout(function() {
console.log('mapReady');
if (typeof window.callPhantom === 'function') {
window.callPhantom( 'mapReady' );
}
}, 1);
};
function initMap() {
console.log(urlParams);
if (!urlParams['q'] || urlParams['q'].length == 0) return;
var address = urlParams['q'];
(new google.maps.Geocoder()).geocode(
{
'address': address
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.body, {
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// https://snazzymaps.com/explore?tag=greyscale
styles: [
{
"featureType": "all",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#e5c163"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#c4c4c4"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#e5c163"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#e5c163"
},
{
"lightness": "0"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#e5c163"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#575757"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#2c2c2c"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#999999"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
],
zoom: 15,
center: results[0].geometry.location
});
google.maps.event.addListener(map, 'idle', mapReady);
google.maps.event.addListener(map, 'tilesloaded', mapReady);
}
}
);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&amp;key=AIzaSyAwXsCXrBIDZY_gXlXykPBA31OYkrj0vps"></script>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment