Skip to content

Instantly share code, notes, and snippets.

@bdogan

bdogan/bundle.html

Last active November 20, 2018 11:26
Show Gist options
  • Save bdogan/f6abe865610de9126aa38bfe69d1a040 to your computer and use it in GitHub Desktop.
Save bdogan/f6abe865610de9126aa38bfe69d1a040 to your computer and use it in GitHub Desktop.
Download ZIP
Klüber türkiye bayi gösterimi
Raw
bundle.html
<div id="map"></div>
<style>
#map a,.worldwide-layer .head a{color:#fdb913;text-decoration:none}#map blockquote,#map button,#map code,#map dd,#map div,#map dl,#map dt,#map fieldset,#map form,#map h1,#map h2,#map h3,#map h4,#map h5,#map h6,#map input,#map legend,#map li,#map ol,#map p,#map pre,#map td,#map textarea,#map th,#map ul{margin:0;padding:0}#map a{-webkit-transition:all .25s;-moz-transition:all .25s;-o-transition:all .25s;transition:all .25s}#map h3{line-heigt:1.25;margin-top:2.13018em;margin-bottom:1.18343em}#map h1,#map h2,#map h3,#map h4,#map h5,#map h6{font-size:100%;font-weight:400}#map>*{box-sizing:border-box}#map{width:50%;min-width:600px;height:100%;margin:0 auto}#location-info{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.worldwide-layer{font-family:"Helvetica World W01",sans-serif;font-size:14px;padding-bottom:40px;width:470px;max-height:100vh}.worldwide-layer>div:first-child{padding-top:5px;padding-bottom:5px}.worldwide-layer .head{position:relative}.worldwide-layer h3{margin:0;font-size:18px;font-weight:700;padding-left:20px;line-height:30px;padding-right:20px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjI3OEQyQkU1QkE2MTFFNUIxNzhFRjAyNzEzRTBEMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjI3OEQyQkY1QkE2MTFFNUIxNzhFRjAyNzEzRTBEMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMjc4RDJCQzVCQTYxMUU1QjE3OEVGMDI3MTNFMEQxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMjc4RDJCRDVCQTYxMUU1QjE3OEVGMDI3MTNFMEQxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqF/82gAAADNSURBVHjajJLBEYIwFEQDYwOxBDmFqy1gCbZgC6QE0kJaoARtwWtupgVKwF0mGT8BZtyZJfB5k/0/UM3zrKi2bTWWh/ppDCHE/FARBERggLVaywG2C2iM6bA+04sJfsOXZMoCdrWII9CgeIMb3PtU73kheBcxk4i1adVoravVnyI45og0edaQ+0bS65R6YfwV/gAuh3HyeDh1d5B6Zu+5R38A+TzgAuKBfcYd0MlhNkWxW9yAKPpiV1cej9o55NUPsYhTS+Pb67JGfwUYAKoJaSwfSNcPAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:0 7px}.worldwide-layer .head a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAYAAADUFP50AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEZFNkY3N0M1QkFCMTFFNUIyOUFGNTBFMjNGNTBBRTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEZFNkY3N0Q1QkFCMTFFNUIyOUFGNTBFMjNGNTBBRTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RkU2Rjc3QTVCQUIxMUU1QjI5QUY1MEUyM0Y1MEFFNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RkU2Rjc3QjVCQUIxMUU1QjI5QUY1MEUyM0Y1MEFFNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk/ecjYAAAEYSURBVHjadFKBEYIwDBTOBbpCHUFHwGOCOoKOACPICDICLgAHI+gIsgIj4Mf7aKjauydtkyefNMk8zyu7uq7zMMFcTcA1z/PJxiVKBMHBnIHj6nsJqQK5WhCZpQe8ZgBGxmyNggHkvSXeGHAHDnCOkfwMpgEcM5dJ27Yi7cIMO8aK5JIKggSCLD++0b9J8cl4UP096+yJAqQLyKKmZkywRO3c3dTmuNe7QX2pOk2766ijI5ul3ZXl1nR4dnaiPLs8G7Pn/qUgNekDs5Y8n5h9MvWHtwp01QMzkcnzyJ1Yu4ctGPOQc8o30yw9JBemFn3Hhk+kShYjJ44iGjMXnUskqhdEMyHHX0POiflMlNYSA7W4fz7BU4ABAKu9xYdZ1akiAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center center;width:14px;height:15px;position:absolute;right:12px;top:12px;-webkit-transition:all .25s;-moz-transition:all .25s;-o-transition:all .25s;transition:all .25s}.worldwide-layer>div{overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 40px);background-color:#fff;margin-bottom:1px;padding:15px 20px}.worldwide-layer .vcard-wrap{margin-left:-1.53846em;margin-right:-1.53846em;display:flex;flex-wrap:wrap}.worldwide-layer .vcard-wrap .vcard{margin:0 0 30px;min-height:1px;padding-left:1.53846em;padding-right:1.53846em;width:50%}.worldwide-layer .adr,.worldwide-layer .vcard-wrap h5{margin:0}.vcard .org{font-weight:700}.vcard .adr,.vcard .mail,.vcard .org{margin:.57692em 0}.worldwide-layer .form,.worldwide-layer .locations-mobile .form,.worldwide-layer .locations-mobile .mail,.worldwide-layer .locations-mobile .web,.worldwide-layer .mail,.worldwide-layer .web{padding-left:20px;background-repeat:no-repeat;font-weight:700}.worldwide-layer .locations-mobile .mail,.worldwide-layer .mail{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;margin:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTlCOEY1MDY1QkFBMTFFNUFGQ0RCMzEyOEI3MzE4RTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTlCOEY1MDc1QkFBMTFFNUFGQ0RCMzEyOEI3MzE4RTIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFOUI4RjUwNDVCQUExMUU1QUZDREIzMTI4QjczMThFMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFOUI4RjUwNTVCQUExMUU1QUZDREIzMTI4QjczMThFMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrX6x4wAAAB9SURBVHjaYvy7UziUgYFBiYE4cI8FSKxiIAEwAXEnCeo7QRpWE6kJpGY1SMNukNuA2BWI32NR+B4qB1KzG6RBEIhnAnEaEJtAbYSB1VCxNKgaQUZgKP1HMy0dySaYYYIwBegaYOAslDZGl2DB4UFjXD5ngfremMhgPQsQYAANrxwechPfQQAAAABJRU5ErkJggg==);background-position:0 6px}.vcard .form,.vcard .mail,.vcard .web{display:inline-block;line-height:20px}.worldwide-layer .locations-mobile .web,.worldwide-layer .web{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjVERjI0ODE1QkFBMTFFNUE5OTBDM0M2MDlGNUI3MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjVERjI0ODI1QkFBMTFFNUE5OTBDM0M2MDlGNUI3MTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNURGMjQ3RjVCQUExMUU1QTk5MEMzQzYwOUY1QjcxMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNURGMjQ4MDVCQUExMUU1QTk5MEMzQzYwOUY1QjcxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmEmc4EAAACRSURBVHjaYvz//z/Dv10ioQwMDEoM2MF7IF7N5PbmPQtQ4SogJ5QBPygHYmXGvzuF/6NJrAbiWUj8NKhhrkxYTHEBWQ20dg8IA9lnYRJMDCQAFiyecQWaeBbolzRkU9EVoyucCRV7j00xukIQEIRiDMXGQIXGSAoxACjo7uKJEGSgDDI5DIg7CCgExeA9gAADAOB+NAVuQNDuAAAAAElFTkSuQmCC);background-position:0 3px}.worldwide-layer .form,.worldwide-layer .locations-mobile .form{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkMzNDE1QTk1QkFBMTFFNUI1NkFCMjJFRERGRjhGRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkMzNDE1QUE1QkFBMTFFNUI1NkFCMjJFRERGRjhGRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQzM0MTVBNzVCQUExMUU1QjU2QUIyMkVEREZGOEZFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQzM0MTVBODVCQUExMUU1QjU2QUIyMkVEREZGOEZFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhyZX9MAAAB9SURBVHjaYvy7UziNgYFBkAEVnAVhJrc372ECjECF/xkwQQUQGwNxJ1AxSBMDEwNuALJl979dIsaEFJ6F4nKgYkFcCkOBGOS+PVDFxixo7jqLpmE3TA5ZIcj393C5A1nhLCwmumBTqITHYygKXYi1WgmfqSxQ3xICqwECDACi2R3qltBTiAAAAABJRU5ErkJggg==)}.vcard .tel:before{content:'T.'}.vcard .fax:before,.vcard .tel:before{font-weight:700;display:inline-block;width:1.53846em}span.tel{line-height:22px}
</style>
<div id="location-info" class="worldwide-layer">
<div class="head">
<h3>{{locationName}}</h3>
<a href="#" id="close-popup"></a>
</div>
<div>
<div class="vcard-wrap">
{{#resellers}}
<div class="vcard">
<h5 class="org">{{title}}</h5>
<div class="adr">
{{{address}}}
</div>
<span class="tel">{{telephone}}</span>
<a class="mail" href="mailto:{{email}}">{{email}}</a>
<br>
{{#website}}
<a class="web" href="{{website}}">İnternet sitesi</a>
{{/website}}
</div>
{{/resellers}}
</div>
</div>
</div>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyB6Z1NiC09zDSqxTNsAJ2kuTaS_jTsz4Wk&libraries=places'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js'></script>
<script>
/**
* Author: Burak Doğan <[email protected]>
*/
var markerIcon = [
"https://www.klueber.com/project/frontend/public/pics/map-marker.png",
"https://www.klueber.com/project/frontend/public/pics/map-marker-hover.png"
]
/**
* Locations (Bayiler)
* "İl/İlçe" => { location: { lat: float, lng: float }, resellers: bayi[] } şeklinde
*/
var locations = {
"Çerkezköy": {
location: {
// Marker'ın geleceği enlem-boylam bilgileri
lat: 41.2859792,
lng: 27.9923119
},
resellers: [
{
title: "Klüber Lubrication Yağlama Ürünleri San. Ve Tic. A.Ş.",
address: "Çerkezköy Organize Sanayi Bölgesi<br>Karaağaç Mah. 10. Sok. No:7<br>59500 Kapaklı/Tekirdağ",
email: "[email protected]",
website: "https://www.klueber.com/tr/tr/homepage",
telephone: "0 282 758 15 30"
}
]
},
"İstanbul": {
location: {
lat: 41.0054958,
lng: 28.8720962
},
resellers: [
{
title: "Klüber Lubrication Yağlama Ürünleri San. Ve Tic. A.Ş.",
address: "Maslak Mah. Sümer Sok. No: 3/9 Sarıyer",
email: "[email protected]",
website: "https://www.klueber.com/tr/tr/homepage",
telephone: "0 212 286 07 70"
},
{
title: "Almo Petrol Ürünleri Antrepoculuk ve Loj. Hiz. Dış. Tic. Ltd. Şti.",
address: "Marmara Mah. Liman Cad. No:38 Ambarlı Liman Yakuplu, Beylikdüzü",
email: "[email protected]",
website: "http://www.almogrup.com",
telephone: "0 212 875 15 66"
}
]
},
"Ankara": {
location: {
lat: 39.9035557,
lng: 32.6226814
},
resellers: [
{
title: "Merkez Sanayi Kimyasalları Tic. Ltd. Şti.",
address: "İvedik OSB 1368. Cad. Halk İş Merkezi No : 17/43 Yenimahalle",
email: "[email protected]",
website: "http://www.merkezsanayi.com.tr",
telephone: "0 312 394 42 69"
}
]
},
"Gaziantep": {
location: {
lat: 37.0588348,
lng: 37.3451175
},
resellers: [
{
title: "Geçit Makina Gıda Plastik San. Ve Tic. Ltd. Şti.",
address: "3. Organize Sanayi Bölgesi Sos. Tes. A Blok No:14",
email: "[email protected]",
website: "http://www.gecitmakina.com",
telephone: "0 342 337 86 81"
}
]
},
"Kayseri": {
location: {
lat: 38.723514,
lng: 35.4001473
},
resellers: [
{
title: "Güpgüpoglu Rulman Ve Hırdavat Ekipmanları San. Tic. Ltd. Şti.",
address: "Kayseri Organize Sanayi Bölgesi 21. Cadde No:2/C Melikgazi",
email: "[email protected]",
website: "http://www.gupgupoglu.com",
telephone: "0 352 336 37 32"
}
]
},
"Uşak": {
location: {
lat: 38.6692501,
lng: 29.3711806
},
resellers: [
{
title: "Zirve Petrokimya Otomotiv Tic. Ltd. Şti.",
address: "Fevzi Çakmak Mah. 1 Eylül Sanayi Sitesi 7. Site Sk. No:30",
email: "[email protected]",
website: "http://zirvepetrol.com",
telephone: "0 545 271 39 06"
}
]
},
"İzmir": {
location: {
lat: 38.4178607,
lng: 26.9396335
},
resellers: [
{
title: "Ava Endüstriyel Yağlar San. Tic. Ltd. Şti.",
address: "353 Sokak No:15 2. Sanayi Sitesi Bornova",
email: "[email protected]",
website: "http://avayag.com.tr",
telephone: "0 232 461 30 96"
}
]
},
"Denizli": {
location: {
lat: 37.7800988,
lng: 29.0893996
},
resellers: [
{
title: "Doğan Rulman Sanayi Ve Ticaret, Ramazan Doğan",
address: "Sümer Mah. 160. Sokak No:42 D:42",
email: "[email protected]",
website: "http://www.doganrulman.com",
telephone: "0 258 264 05 15"
}
]
},
"Kocaeli": {
location: {
lat: 40.818298,
lng: 29.9096461
},
resellers: [
{
title: "Drama Endüstri Ürünleri San. ve Tic. Ltd. Şti.",
address: "İnönü Mah. Güzeller O.S.B. SS Galvano Koop. Kazım Karabekir Sok. No:4/4 Gebze",
email: "[email protected]",
website: "http://www.dramaendustri.com",
telephone: "0 262 751 49 21"
}
]
},
"Malatya": {
location: {
lat: 38.349248,
lng: 38.3109181
},
resellers: [
{
title: "Ersu Rulman Otomotiv Tic. Ve San. Ltd. Şti.",
address: "Çavusoglu Mah. Hünerli Cad. No:20 Yeşilyurt",
email: "[email protected]",
website: "http://www.ersurulman.com.tr",
telephone: "0 422 336 43 99"
}
]
},
"Bursa": {
location: {
lat: 40.1911952,
lng: 29.0592306
},
resellers: [
{
title: "Drama Kimya Petrol ve Kim. Ürünler Tar. Or. Gıda Ür. Teks. İnş. Taah. San. Tic. Ltd. Şti.",
address: "Akçalar Sanayi Bölgesi Koruçeşme Cad. No:14/1 Nilüfer",
email: "[email protected]",
website: "http://www.dramakimya.com",
telephone: "0 224 242 43 13"
},
{
title: " Tünsal Tekstil Mak. Mobilya San. Ve Tic. Ltd. Şti.",
address: "Buttim İş Merkezi C Blok K:5 No:1506 Osmangazi",
email: " [email protected]",
website: "http://www.endustriyelmakinayaglari.com",
telephone: "0 224 211 29 27"
}
]
},
"Kahramanmaraş": {
location: {
lat: 37.5768508,
lng: 36.9010092
},
resellers: [
{
title: "Marpi Tekstil Gida İhracat Paz. Tic. San. Ltd. Şti.",
address: "Sazibey Mah. 27. Sokak No:60",
email: "[email protected]",
telephone: "0 344 232 03 00"
}
]
}
};
// Like global site apparence
var mapStyle = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#ffb937"
}
]
},
{
"elementType": "labels",
"stylers": [
{
"color": "#ffb937"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
},
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#404040"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
}
];
var centerLocation = {
lat: 39.0015406,
lng: 33.6891795
}
// Google map
var map = new google.maps.Map(document.getElementById('map'),{
center: centerLocation,
zoom: 6,
styles: mapStyle,
disableDefaultUI: true,
gestureHandling: 'greedy',
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
// Find location coordinates by given info
var locationNames = Object.keys(locations);
var markers = [];
for (var i = 0; i < locationNames.length; i++) {
(function(locationName){ addMarker(locationName); })(locationNames[i]);
}
// Define popup
definePopupClass();
var popupTemplate = document.getElementById("location-info").innerHTML;
Mustache.parse(popupTemplate);
document.getElementById("location-info").innerHTML = ""
var popup = new Popup(document.getElementById("location-info"));
// Add marker to map
function addMarker(locationName) {
var currentLocation = locations[locationName];
if (!currentLocation.location) return;
var marker = new google.maps.Marker({
position: currentLocation.location,
title: locationName,
animation: google.maps.Animation.DROP,
map: map,
icon: markerIcon[0]
});
marker.addListener('mouseover', function(){ marker.setIcon(markerIcon[1]); });
marker.addListener('mouseout', function(){ marker.setIcon(markerIcon[0]); });
marker.addListener('click', function(){
popup.setLocation(locationName);
if (!popup.getState()) popup.setMap(map);
});
markers.push(marker);
}
/** Defines the Popup class. */
function definePopupClass() {
/**
* A customized popup on the map.
* @param {!google.maps.LatLng} position
* @param {!Element} content
* @constructor
* @extends {google.maps.OverlayView}
*/
Popup = function(content) {
this.anchor = content;
this.stopEventPropagation();
this.state = false;
};
// NOTE: google.maps.OverlayView is only defined once the Maps API has
// loaded. That is why Popup is defined inside initMap().
Popup.prototype = Object.create(google.maps.OverlayView.prototype);
Popup.prototype.getState = function(){
return this.state;
}
/** Called when the popup is added to the map. */
Popup.prototype.onAdd = function() {
this.state = true;
this.getPanes().floatPane.appendChild(this.anchor);
document.getElementById("close-popup").addEventListener("click", function(e){
e.preventDefault();
popup.setMap(null);
});
};
/** Called when the popup is removed from the map. */
Popup.prototype.onRemove = function() {
this.state = false;
if (this.anchor.parentElement) {
this.anchor.parentElement.removeChild(this.anchor);
}
};
// Set location
Popup.prototype.setLocation = function(locationName) {
this.location = locations[locationName];
this.anchor.innerHTML = Mustache.render(popupTemplate, { resellers: this.location.resellers, locationName: locationName });
}
/** Stops clicks/drags from bubbling up to the map. */
Popup.prototype.stopEventPropagation = function() {
var anchor = this.anchor;
anchor.style.cursor = 'auto';
['click', 'dblclick', 'contextmenu', 'wheel', 'mousedown', 'touchstart',
'pointerdown']
.forEach(function(event) {
anchor.addEventListener(event, function(e) {
e.stopPropagation();
});
});
};
}
</script>
Raw
index.html
<div id="map"></div>
<div id="location-info" class="worldwide-layer">
<div class="head">
<h3>{{locationName}}</h3>
<a href="#" id="close-popup"></a>
</div>
<div>
<div class="vcard-wrap">
{{#locations}}
<div class="vcard">
<h5 class="org">{{title}}</h5>
<div class="adr">
{{{address}}}
</div>
<span class="tel">{{telephone}}</span>
<a class="mail" href="mailto:{{email}}">{{email}}</a>
<br>
<a class="web" href="{{website}}">İnternet sitesi</a> </div>
{{/locations}}
</div>
</div>
</div>
Raw
script.js
/**
* Author: Burak Doğan <[email protected]>
*/
var markerIcon = [
"https://www.klueber.com/project/frontend/public/pics/map-marker.png",
"https://www.klueber.com/project/frontend/public/pics/map-marker-hover.png"
]
/**
* Locations (Bayiler)
* "İl" => bayi[] şeklinde
*/
var locations = {
"Çorlu": [
{
title: "Klüber Lubrication Yağlama Ürünleri San. ve Tic. A.Ş.",
address: "Sanayi Bölgesi<br>Karaağaç Mah. 10. Sok. No:7<br>PK 56 <br>59500 Kapaklı/Tekirdağ",
email: "[email protected]",
website: "http://www.bizimmakina.com",
telephone: "+90 0282 7581530"
},
{
title: "Bizim Makina 2",
address: "Camii yanı 2 no: 16",
email: "[email protected]",
website: "http://www.bizimmakina.com",
telephone: "0282 652 15 44"
},
{
title: "Bizim Makina 2",
address: "Camii yanı 2 no: 16",
email: "[email protected]",
website: "http://www.bizimmakina.com",
telephone: "0282 652 15 44"
}
],
"Ankara": [
{
title: "Deneme Makina",
address: "Orası yanı no: 16",
email: "[email protected]",
website: "http://www.deneme.com",
telephone: "212 652 15 44"
}
]
};
// Like global site apparence
var mapStyle = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#ffb937"
}
]
},
{
"elementType": "labels",
"stylers": [
{
"color": "#ffb937"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#715322"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
},
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#404040"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
}
];
var centerLocation = {
lat: 39.0015406,
lng: 33.6891795
}
// Google map
var map = new google.maps.Map(document.getElementById('map'),{
center: centerLocation,
zoom: 6,
styles: mapStyle,
disableDefaultUI: true,
gestureHandling: 'greedy',
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
// Find location coordinates by given info
var service = new google.maps.places.PlacesService(map);
var locationNames = Object.keys(locations);
var markers = [];
for (var i = 0; i < locationNames.length; i++) {
(function(locationName){
service.findPlaceFromQuery(
{
query: locationName,
fields: [ 'geometry' ]
},
function(r,s) {
addMarker(locationName, r, s);
}
);
})(locationNames[i]);
}
// Define popup
definePopupClass();
var popupTemplate = document.getElementById("location-info").innerHTML;
Mustache.parse(popupTemplate);
document.getElementById("location-info").innerHTML = ""
var popup = new Popup(document.getElementById("location-info"));
// Add marker to map
function addMarker(locationName, results, status) {
if (status != "OK" || !results.length) return alert("GoogleMaps üzerinde " + locationName + " bulunamadı!")
var marker = new google.maps.Marker({
position: results[0].geometry.location,
title: locationName,
animation: google.maps.Animation.DROP,
map: map,
icon: markerIcon[0]
});
marker.addListener('mouseover', function(){ marker.setIcon(markerIcon[1]); });
marker.addListener('mouseout', function(){ marker.setIcon(markerIcon[0]); });
marker.addListener('click', function(){
popup.setLocation(locationName);
popup.setMap(map);
});
markers.push(marker);
}
/** Defines the Popup class. */
function definePopupClass() {
/**
* A customized popup on the map.
* @param {!google.maps.LatLng} position
* @param {!Element} content
* @constructor
* @extends {google.maps.OverlayView}
*/
Popup = function(content) {
this.anchor = content;
this.stopEventPropagation();
};
// NOTE: google.maps.OverlayView is only defined once the Maps API has
// loaded. That is why Popup is defined inside initMap().
Popup.prototype = Object.create(google.maps.OverlayView.prototype);
/** Called when the popup is added to the map. */
Popup.prototype.onAdd = function() {
this.getPanes().floatPane.appendChild(this.anchor);
document.getElementById("close-popup").addEventListener("click", function(e){
e.preventDefault();
popup.setMap(null);
});
};
/** Called when the popup is removed from the map. */
Popup.prototype.onRemove = function() {
if (this.anchor.parentElement) {
this.anchor.parentElement.removeChild(this.anchor);
}
};
// Set location
Popup.prototype.setLocation = function(locationName) {
this.location = locations[locationName];
this.anchor.innerHTML = Mustache.render(popupTemplate, { locations: this.location, locationName: locationName });
}
/** Stops clicks/drags from bubbling up to the map. */
Popup.prototype.stopEventPropagation = function() {
var anchor = this.anchor;
anchor.style.cursor = 'auto';
['click', 'dblclick', 'contextmenu', 'wheel', 'mousedown', 'touchstart',
'pointerdown']
.forEach(function(event) {
anchor.addEventListener(event, function(e) {
e.stopPropagation();
});
});
};
}
Raw
scripts
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6Z1NiC09zDSqxTNsAJ2kuTaS_jTsz4Wk&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
Raw
style.css
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
a {
color: #fdb913;
text-decoration: none;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
}
h3 {
font-size: 1.53846em;
line-heigt: 1.25;
margin-top: 2.13018em;
margin-bottom: 1.18343em;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
* {
box-sizing: border-box;
}
#map {
width: 50%;
min-width: 600px;
height: 100%;
margin: 0 auto;
}
#location-info {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.worldwide-layer {
font-family: "Helvetica World W01", sans-serif;
font-size: 14px;
padding-bottom: 40px;
width: 470px;
max-height: 100vh;
}
.worldwide-layer>div:first-child {
padding-top: 5px;
padding-bottom: 5px;
}
.worldwide-layer .head {
position: relative;
}
.worldwide-layer>div {
overflow-y: auto;
overflow-x: hidden;
max-height: 400px;
background-color: #ffffff;
margin-bottom: 1px;
padding: 15px 20px;
}
.worldwide-layer h3 {
margin: 0;
font-size: 18px;
font-weight: bold;
padding-left: 20px;
line-height: 30px;
padding-right: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjI3OEQyQkU1QkE2MTFFNUIxNzhFRjAyNzEzRTBEMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjI3OEQyQkY1QkE2MTFFNUIxNzhFRjAyNzEzRTBEMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMjc4RDJCQzVCQTYxMUU1QjE3OEVGMDI3MTNFMEQxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMjc4RDJCRDVCQTYxMUU1QjE3OEVGMDI3MTNFMEQxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqF/82gAAADNSURBVHjajJLBEYIwFEQDYwOxBDmFqy1gCbZgC6QE0kJaoARtwWtupgVKwF0mGT8BZtyZJfB5k/0/UM3zrKi2bTWWh/ppDCHE/FARBERggLVaywG2C2iM6bA+04sJfsOXZMoCdrWII9CgeIMb3PtU73kheBcxk4i1adVoravVnyI45og0edaQ+0bS65R6YfwV/gAuh3HyeDh1d5B6Zu+5R38A+TzgAuKBfcYd0MlhNkWxW9yAKPpiV1cej9o55NUPsYhTS+Pb67JGfwUYAKoJaSwfSNcPAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: 0 7px;
}
.worldwide-layer .head a {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAYAAADUFP50AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEZFNkY3N0M1QkFCMTFFNUIyOUFGNTBFMjNGNTBBRTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEZFNkY3N0Q1QkFCMTFFNUIyOUFGNTBFMjNGNTBBRTUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RkU2Rjc3QTVCQUIxMUU1QjI5QUY1MEUyM0Y1MEFFNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RkU2Rjc3QjVCQUIxMUU1QjI5QUY1MEUyM0Y1MEFFNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk/ecjYAAAEYSURBVHjadFKBEYIwDBTOBbpCHUFHwGOCOoKOACPICDICLgAHI+gIsgIj4Mf7aKjauydtkyefNMk8zyu7uq7zMMFcTcA1z/PJxiVKBMHBnIHj6nsJqQK5WhCZpQe8ZgBGxmyNggHkvSXeGHAHDnCOkfwMpgEcM5dJ27Yi7cIMO8aK5JIKggSCLD++0b9J8cl4UP096+yJAqQLyKKmZkywRO3c3dTmuNe7QX2pOk2766ijI5ul3ZXl1nR4dnaiPLs8G7Pn/qUgNekDs5Y8n5h9MvWHtwp01QMzkcnzyJ1Yu4ctGPOQc8o30yw9JBemFn3Hhk+kShYjJ44iGjMXnUskqhdEMyHHX0POiflMlNYSA7W4fz7BU4ABAKu9xYdZ1akiAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: center center;
width: 14px;
height: 15px;
position: absolute;
right: 12px;
top: 12px;
color: #fdb913;
text-decoration: none;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
}
.worldwide-layer>div {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 40px);
background-color: #ffffff;
margin-bottom: 1px;
padding: 15px 20px;
}
.worldwide-layer .vcard-wrap {
margin-left: -1.53846em;
margin-right: -1.53846em;
display: flex;
flex-wrap: wrap;
}
.worldwide-layer .vcard-wrap .vcard {
margin: 0;
margin-bottom: 30px;
min-height: 1px;
padding-left: 1.53846em;
padding-right: 1.53846em;
width: 50%;
}
.worldwide-layer .vcard-wrap h5 {
margin: 0;
}
.vcard .org, .vcard .adr, .vcard .mail {
margin: 0.57692em 0;
}
.vcard .org {
font-weight: bold;
}
.worldwide-layer .adr {
margin: 0;
}
.vcard .org, .vcard .adr, .vcard .mail {
margin: 0.57692em 0;
}
.worldwide-layer .locations-mobile .mail, .worldwide-layer .mail, .worldwide-layer .locations-mobile .web, .worldwide-layer .web, .worldwide-layer .locations-mobile .form, .worldwide-layer .form {
padding-left: 20px;
background-repeat: no-repeat;
font-weight: bold;
}
.worldwide-layer .locations-mobile .mail, .worldwide-layer .mail {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
margin: 0;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTlCOEY1MDY1QkFBMTFFNUFGQ0RCMzEyOEI3MzE4RTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTlCOEY1MDc1QkFBMTFFNUFGQ0RCMzEyOEI3MzE4RTIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFOUI4RjUwNDVCQUExMUU1QUZDREIzMTI4QjczMThFMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFOUI4RjUwNTVCQUExMUU1QUZDREIzMTI4QjczMThFMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrX6x4wAAAB9SURBVHjaYvy7UziUgYFBiYE4cI8FSKxiIAEwAXEnCeo7QRpWE6kJpGY1SMNukNuA2BWI32NR+B4qB1KzG6RBEIhnAnEaEJtAbYSB1VCxNKgaQUZgKP1HMy0dySaYYYIwBegaYOAslDZGl2DB4UFjXD5ngfremMhgPQsQYAANrxwechPfQQAAAABJRU5ErkJggg==');
background-position: 0 6px;
}
.vcard .mail, .vcard .web, .vcard .form {
display: inline-block;
line-height: 20px;
}
.worldwide-layer .locations-mobile .web, .worldwide-layer .web {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjVERjI0ODE1QkFBMTFFNUE5OTBDM0M2MDlGNUI3MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjVERjI0ODI1QkFBMTFFNUE5OTBDM0M2MDlGNUI3MTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNURGMjQ3RjVCQUExMUU1QTk5MEMzQzYwOUY1QjcxMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNURGMjQ4MDVCQUExMUU1QTk5MEMzQzYwOUY1QjcxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmEmc4EAAACRSURBVHjaYvz//z/Dv10ioQwMDEoM2MF7IF7N5PbmPQtQ4SogJ5QBPygHYmXGvzuF/6NJrAbiWUj8NKhhrkxYTHEBWQ20dg8IA9lnYRJMDCQAFiyecQWaeBbolzRkU9EVoyucCRV7j00xukIQEIRiDMXGQIXGSAoxACjo7uKJEGSgDDI5DIg7CCgExeA9gAADAOB+NAVuQNDuAAAAAElFTkSuQmCC');
background-position: 0px 3px;
}
.worldwide-layer .locations-mobile .form, .worldwide-layer .form {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkMzNDE1QTk1QkFBMTFFNUI1NkFCMjJFRERGRjhGRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkMzNDE1QUE1QkFBMTFFNUI1NkFCMjJFRERGRjhGRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQzM0MTVBNzVCQUExMUU1QjU2QUIyMkVEREZGOEZFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQzM0MTVBODVCQUExMUU1QjU2QUIyMkVEREZGOEZFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhyZX9MAAAB9SURBVHjaYvy7UziNgYFBkAEVnAVhJrc372ECjECF/xkwQQUQGwNxJ1AxSBMDEwNuALJl979dIsaEFJ6F4nKgYkFcCkOBGOS+PVDFxixo7jqLpmE3TA5ZIcj393C5A1nhLCwmumBTqITHYygKXYi1WgmfqSxQ3xICqwECDACi2R3qltBTiAAAAABJRU5ErkJggg==');
}
.vcard .tel:before {
content: 'T.';
}
.vcard .tel:before, .vcard .fax:before {
font-weight: bold;
display: inline-block;
width: 1.53846em;
}
span.tel {
line-height: 22px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment