Skip to content

Instantly share code, notes, and snippets.

@alex-boom

alex-boom/google-map.html

Last active May 2, 2018 12:17
Show Gist options
  • Save alex-boom/c7f3191cdca1221a27507b022c2a9f45 to your computer and use it in GitHub Desktop.
Save alex-boom/c7f3191cdca1221a27507b022c2a9f45 to your computer and use it in GitHub Desktop.
Download ZIP
google-map
Raw
google-map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>google map</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6-Rn3HHXzDyy7N3wVjPmPsyY6Cq8tQ7s"></script>
</head>
<style>
.map-holder {
width: 100%;
.address-area {
position: absolute;
left: -9999px;
}
}
.map-wrap {
height: 100% !important;
}
</style>
<body>
<div class="map-box">
<div class="map-holder" rel="inc/map-styles.json">
<div class="address-area">
<address>
Ogburn St Osprey, FL 34229
</address>
</div>
<div class="map-wrap"></div>
</div>
</div>
<script>
// inc/map-styles.json конфиг что ниже получать сдесь https://snazzymaps.com/
{
"styles":[
{
"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",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.province",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"saturation": "-100"
},
{
"lightness": "30"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"gamma": "0.00"
},
{
"lightness": "74"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [
{
"lightness": "3"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
]
}
</script>
<script>
jQuery(window).on('load', function(){
initMap();
})
var isTouchDevice = /Windows Phone/.test(navigator.userAgent) || ('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch;
// map init
function initMap(){
jQuery('.map-box').createMarker({
holderMap: '.map-holder',
wrapMap: '.map-wrap',
activeClass: 'active',
overlay: '.overlay',
pinSRC: 'images/pin.svg',
address: 'address'
});
}
/*
* jQuery CreateMarker plugin
*/
;(function($) {
function CreateMarker(options) {
this.options = $.extend({
holderMap: null,
activeClass: 'active',
addressArea: '.address-area',
overlay: '.overlay',
address: 'address',
jsonAttr: 'rel',
pinSRC: 'images/pin.svg',
mapOptions: {
zoom: 17,
scrollwheel: false,
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeControl: false,
streetViewControl: false,
draggable: isTouchDevice ? false : true
}
}, options);
this.init();
}
CreateMarker.prototype = {
init: function() {
this.findElements();
this.makeCallback('onInit', this);
this.createMap();
this.attachEvents();
},
findElements: function() {
this.holder = jQuery(this.options.holder);
this.wrap = this.holder.find(this.options.holderMap);
this.wrapMap = this.holder.find(this.options.wrapMap);
this.addressArea = this.holder.find(this.options.addressArea);
this.address = this.addressArea.find(this.options.address);
this.overlay = this.wrap.find(this.options.overlay);
this.win = jQuery(window);
this.openWindow = null;
},
createMap: function() {
var self = this;
this.map = new google.maps.Map(self.wrapMap[0], self.options.mapOptions);
this.geocoder = new google.maps.Geocoder();
var url = self.wrap.attr(self.options.jsonAttr);
if (url !== undefined){
jQuery.ajax({
type:'get',
url: url,
cache: false,
dataType: 'text',
success:function(response) {
var data = jQuery.parseJSON(response);
jQuery(data).each(function() {
var obj = this;
self.map.setOptions({ styles: obj.styles });
});
self.createMarkerIcon();
},
error:function() {
// alert('AJAX Error!');
}
});
} else {
this.createMarkerIcon();
}
},
createMarkerIcon: function() {
var self = this;
this.geocoder.geocode( { 'address': this.address.text()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
self.coord = results[0].geometry.location
self.map.setCenter(self.coord);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: self.map,
icon: self.options.pinSRC
});
setTimeout(function() {
self.overlay.fadeOut();
}, 1000);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
},
attachEvents: function() {
var self = this;
// flexible layout handler
this.resizeHandler = function() {
self.wrapMap.css({
height: self.addressArea.outerHeight()
});
self.map.setCenter(self.coord);
};
this.resizeHandler();
this.win.on('resize orientationchange', this.resizeHandler);
},
makeCallback: function(name) {
if (typeof this.options[name] === 'function') {
var args = Array.prototype.slice.call(arguments);
args.shift();
this.options[name].apply(this, args);
}
}
};
$.fn.createMarker = function(options) {
return this.each(function() {
$(this).data('CreateMarker', new CreateMarker($.extend(options, { holder:this })));
});
};
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment