Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="map"> </div>

<div id="box">
  <h5>Heute schon gelimmert?</h5>
  <span>
	  Hannover ist die Kiosk-Hauptstadt Deutschlands! 
	  Wir haben nicht nur eine extrem hohe Dichte des gemütlichen „Einzelhandels mit erweiterten Öffnungszeiten“ – 
	  wir haben sogar ein eigenes <b>Kiosk-Quartett</b>, einen <b>Kiosk-Guide</b> und einen <b>Kiosk mit Außenterrasse</b>! 
	  Hier gibts einen Einstieg in die Kiosk-Welt, klickt euch durch :) 
  </span>
</div>

              
            
!

CSS

              
                /**
 *  Demo styles
 */

*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

a {
  text-decoration: none;
}

.map {
  width: 100%;
}

.map__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
}

/* Google Map (static) */
.map__frame img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: auto;
}

/* Google Map (dynamic) */
.gm-style {
  width: 100%;
  min-height: 300px;
}

/* Google Map (dynamic) - info window */
.gm-style-iw {
  font-size: 12px;
  line-height: 18px;
  display: inline-block;
  width: 100px;
  height: 150px;
  background: rgba(160,212,104,1);
  margin-top: 2px;
  transition: background-color 1s ease-out, width 0.3s ease, height 0.3s ease 0.3s;
}

.gm-style-iw:hover {
  background-color: #CDE1B7;
  width: 100px;
  height: 100px; 
  width: 300px;
  height: 276px;
}
  
}
.map__print,
.map__legend {
  display: none;
}

.map__frame + .map__legend {
  display: block;
  height: 240px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  font-size: 12px;
  line-height: 18px;
}

.map__title,
.map__address,
.map__description {
  display: block;
  color: #000;
}

.map__title {
  margin: 0;
  font-weight: bold;
  font-size: 14px;
}

.map__address {
  margin: 0 0 10px;
  font-weight: bold;
}

.map__legend ul {
  margin: 0;
  padding: 0;
}

.map__legend ul li {
  position: relative;
  width: 100%;
  padding: 12px 10px 11px 38px;
  border-bottom: 1px solid #d0d0d0;
}

.map__marker {
  position: absolute;
  left: 10px;
  top: 13px;
  width: 19px;
  height: 28px;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
}


@media only screen and (min-width: 768px) {
  .map {
    height: 100%;      
    height: 100vh;
  }

  .map__legend {
    display: block;
    width: 192px;
    height: auto;
    overflow-y: auto;
    padding: 5px 10px;
    margin: 0 0 5px;
    background: #98F072;
    color: #444;
    line-height: 25px;
    border: 1px solid #bbb;
  }

  .map > .map__legend {
    display: none;
  }

  .map__legend strong {
    color: #145215;
  }

  .map__legend a {
    color: #000;
  }
  
  .map__legend a:hover {
    color: green;
  }

  .map__frame {
    min-height: 100%;   
    background: #F5CA80;
  }

  .map__frame + .map__legend {
    display: none;
  }

  .map__print {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 1;
    display: inline-block;
    padding: 6px 12px;
    background: #ff6600;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
  }

}

#box {
  position: absolute;
  top: 100px;
  left: 10;
  width: 200px;
  height: 270px;
  background: rgba(160,212,104,1);
  text-align: center;
  -moz-animation: jump 2s infinite ease-in-out;
  -webkit-animation: jump 2s infinite ease-in-out;
}
@-moz-keyframes jump {
  0% {
    top: 100px;
  }
  50% {
    top: 25px;
  }
  100% {
    top: 100px;
  }
}

@-webkit-keyframes jump {
  0% {
    top: 100px;
  }
  50% {
    top: 25px;
  }
  100% {
    top: 100px;
  }
}
span {
  font-size: 11px;
}
              
            
!

JS

              
                /**
 *  This demo uses Google Map Generator plugin
 *  https://github.com/clintioo/google-maps-generator
 */
function googleMapGenerator(h){if(!(this instanceof googleMapGenerator)){return new googleMapGenerator(h)}var x=googleMapGenerator.options,o=document.querySelectorAll("."+x.containerClass)[0],p,A,z;if(h){x=w(googleMapGenerator.options,h)}u();function u(){if(!q()&&x.docWidth>=x.breakpointDynamicMap){t();return false}if(x.docWidth<x.breakpointDynamicMap&&x.isStaticMap){g(x.docWidth,x.docWidth);d()}else{r()}window.onresize=function(){f()}}function f(){var D=document.body.clientWidth;if(x.docWidth<x.breakpointDynamicMap&&D>=x.breakpointDynamicMap&&!j()){t()}if(x.docWidth>=x.breakpointDynamicMap&&D<x.breakpointDynamicMap){n()}if(q()){C()}return x.docWidth=D}function r(){x.isStaticMap=false;x.markerAnimation=google.maps.Animation.DROP;z={zoom:x.mapZoom,center:new google.maps.LatLng(x.mapLat,x.mapLng),mapTypeControlOptions:{mapTypeIds:[google.maps.MapTypeId.ROADMAP,"map_style"]}};if(c()){p=document.querySelectorAll("."+x.frameClass)[0];A=new google.maps.Map(p,z)}else{var D=document.createElement("div");D.setAttribute("class",x.frameClass);o.appendChild(D);A=new google.maps.Map(D,z)}if(x.hasLegend){a()}if(x.styles){e()}if(x.locations){b()}if(x.hasPrint){l()}return A}function a(){var D=document.createElement("div");if(!document.querySelectorAll("."+x.legendClass)[0]){o.insertAdjacentHTML("beforeend",v())}D.setAttribute("class",x.legendClass);o.appendChild(D);x.legend=i(o,x.legendClass);return A.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(x.legend)}function v(){var D="",F=x.locations.length;if(x.hasLegend){D+='<div class="'+x.legendClass+'"><ul>';for(var E=0;E<F;E++){D+='<li><span class="map__marker">'+B(E)+"</span> <strong>"+x.locations[E][0]+"</strong><br>"+x.locations[E][1]+"</li>"}D+="</ul></div>"}return D}function e(){var D=new google.maps.StyledMapType(x.styles,{name:"Styled Map"});A.mapTypes.set("map_style",D);return A.setMapTypeId("map_style")}function k(){var E="",D=x.styles.length;for(var H=0;H<D;H++){E+="&amp;style=feature:"+x.styles[H].featureType+"%7Celement:"+x.styles[H].elementType;for(var F=0,I=x.styles[H].stylers.length;F<I;F++){var K=x.styles[H].stylers[F];for(var G in K){var J=K[G].toString().replace("#","0x");E+="%7C"+G+":"+J}}}return E}function b(){var E=window.scrollY||document.documentElement.scrollTop,F=[];if(!q()){return false}if(x.markersAdded){return false}if(x.markerLoad==="scroll"&&o.offsetTop>E){return false}if(x.isStaticMap===true){return false}if(x.hasInfoWindow){var G=null;G=new google.maps.InfoWindow({content:"",maxWidth:240})}for(var J=0,D=x.locations.length;J<D;J++){var N=x.locations[J],I=new google.maps.LatLng(N[3],N[4]),K;if(x.hasMarkerIcon){if(N[6]){x.markerIcon={url:N[6]}}else{x.markerIcon="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+B(J)+"|"+x.markerIconHexBackground+"|"+x.markerIconHexColor}}K=new google.maps.Marker({position:I,map:A,icon:x.markerIcon,animation:x.markerAnimation,title:N[0],html:'<div><span class="map__title">'+N[0]+'</span><span class="map__address">'+N[1]+'</span><span class="map__description">'+N[2]+"</span></div>",zIndex:N[5]});F.push(K);if(x.hasLegend){var L=document.createElement("div");L.setAttribute("class","map__legend__item");L.innerHTML="<strong>"+x.markerIconLabel+'</strong>&nbsp;&nbsp;<a href="#">'+N[0]+"</a>";x.legend.appendChild(L)}if(x.hasInfoWindow){google.maps.event.addListener(K,"click",function(){G.setContent(this.html);G.open(A,this)});google.maps.event.addListener(A,"click",function(){G.close(A,this)})}}if(x.hasLegend){var H=document.querySelectorAll("."+x.legendClass+" a"),M=H.length;for(var J=0;J<M;J++){(function(O){H[J].onclick=function(P){P.preventDefault();google.maps.event.trigger(F[O],"click")}})(J)}}return x.markersAdded=true}function s(){var I="",H="",J="size:"+x.markerIconSize,G=x.locations.length;if(x.markerIconHexBackground){H="%7Ccolor:0x"+x.markerIconHexBackground}for(var F=0;F<G;F++){var E="%7Clabel:"+B(F),D="%7C"+x.locations[F][3]+","+x.locations[F][4];if(x.hasMarkerIcon&&location[6]&&G<=5){}else{I+="&amp;markers="+J+H+E+D}}return I}function l(){var D=document.createElement("a");D.setAttribute("class",x.printClass);D.setAttribute("href","#");D.innerHTML="Print";o.appendChild(D);x.print=i(o,x.printClass);x.print.onclick=function(){m();return false}}function g(E,D){return o.innerHTML=y(E,D)+v()}function y(D,M){var D=D||640,M=M||640,E="",N="",I="",L="http://maps.googleapis.com/maps/api/staticmap?",F="center="+x.mapLat+","+x.mapLng,H="&amp;size="+D+"x"+M,G="&amp;zoom="+x.mapZoom,K="",J="";if(x.key){E="&amp;key="+x.key}if(x.styles){J=k()}if(x.locations){K=s()}N='<div class="'+x.frameClass+'"><img style="-webkit-user-select: none" src="'+L+F+G+E+H+K+J+'"></div>';return N}function d(){var D=document.querySelectorAll("."+x.frameClass)[0];D.onclick=function(E){if(!j()){n();t();return false}}}function c(){return document.querySelectorAll("."+x.frameClass)[0]}function j(){return document.querySelectorAll("."+x.mapDynamicClass)[0]}function n(){if(!x.hasResizedMap){var D=document.querySelectorAll("."+x.frameClass)[0];x.hasResizedMap=true;return D.style.height=D.offsetHeight*2.5+"px"}}function C(){var D=A.getCenter();google.maps.event.trigger(A,"resize");return A.setCenter(D)}function t(){var D=document.createElement("script");googleMapGenerator.options.isStaticMap=false;googleMapGenerator.options.markerLoad="load";D.type="text/javascript";D.src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=googleMapGenerator";return document.body.appendChild(D)}function q(){return typeof google==="object"&&typeof google.maps==="object"&&typeof google.maps.InfoWindow==="function"}function B(D){switch(x.markerIconType){case"alpha":x.markerIconLabel=String.fromCharCode(97+D).toUpperCase();break;case"numeric":x.markerIconLabel=D+1;break}return x.markerIconLabel}function m(){/* Remove this function - document.write conflict on Codepen*/ /*var D=window.open("","mapWin","width=640,height=640");D.focus();D.document.write("<style>body { margin:0 } img { width: 100%; height: auto; } .map__legend ul { padding: 0; margin: 1.5em 0 0; } .map__legend ul li { float: left; width: 50%; list-style: none; margin: 0 0 1em; font: 12px sans-serif; }</style>"+y()+v()+"<script>setTimeout(function () { window.focus(); window.print(); }, 1500);<\/script>");D.document.close();return D*/}function w(M,L){var O,F,D,E,J,K,I=arguments[0]||{},H=1,G=arguments.length,N=false;if(typeof I==="boolean"){N=I;I=arguments[1]||{};H=2}if(typeof I!=="object"&&!jQuery.isFunction(I)){I={}}if(G===H){I=this;--H}for(;H<G;H++){if((O=arguments[H])!=null){for(F in O){D=I[F];E=O[F];if(I===E){continue}if(N&&E&&(jQuery.isPlainObject(E)||(J=jQuery.isArray(E)))){if(J){J=false;K=D&&jQuery.isArray(D)?D:[]}else{K=D&&jQuery.isPlainObject(D)?D:{}}I[F]=jQuery.extend(N,K,E)}else{if(E!==undefined){I[F]=E}}}}}return I}function i(K,J){var I;for(var H=0,D=K.childNodes.length;H<D;H++){var G=(K.childNodes[H].className!=undefined)?K.childNodes[H].className.split(" "):[];for(var E=0,F=G.length;E<F;E++){if(G[E]==J){I=K.childNodes[H]}}}return I}return{init:u,onWindowResize:f,addGoogleMapDynamic:r,addGoogleMapDynamicLegend:a,addGoogleMapDynamicStyle:e,addGoogleMapDynamicMarkers:b,addGoogleMapDynamicPrintBtn:l,addGoogleMapStaticStyle:k,addGoogleMapStaticMarkers:s,addGoogleMapStatic:g,generateGoogleMapStatic:y,eventsGoogleMapStatic:d,addGoogleMapStaticLegend:v,hasGoogleMap:c,hasGoogleMapDynamic:j,resizeGoogleMapFrame:n,centerGoogleMapDynamic:C,loadGoogleMapJs:t,hasGoogleMapsJS:q,getGoogleMapMarkerLabel:B,printGoogleMap:m,extend:w,getChildByClass:i}}googleMapGenerator.options={containerClass:"map",frameClass:"map__frame",printClass:"map__print",legendClass:"map__legend",mapDynamicClass:"gm-style",apiKey:null,legend:null,print:null,mapLat:-33.85,mapLng:151.24,mapZoom:12,isStaticMap:true,hasResizedMap:false,hasInfoWindow:true,hasLegend:true,hasPrint:true,hasMarkerIcon:true,markerAnimation:null,markerLoad:"load",markerIconType:"alpha",markerIconLabel:"",markerIconHexColor:"ffffff",markerIconHexBackground:"cc0000",markerIconSize:"large",markerIcon:null,markersAdded:false,locations:[],styles:[],docWidth:document.body.clientWidth,breakpointDynamicMap:768};

/**
 *  Plugin config and init
 */

// Config
// Breakpoint in px (below breakpoint -> load static map, above breakpoint -> load dynamic map)
googleMapGenerator.options.breakpointDynamicMap = 768;
googleMapGenerator.options.mapLat = 52.372011;
googleMapGenerator.options.mapLng = 9.720613;
googleMapGenerator.options.mapZoom = 14;
googleMapGenerator.options.markerIconType = 'numeric';
googleMapGenerator.options.markerIconHexBackground = 'ff6600';
googleMapGenerator.options.markerIconHexColor = '000000';
googleMapGenerator.options.hasPrint = false;
googleMapGenerator.options.locations = [
  ['City Kiosk am Kröpcke', 'Mitte', 'Der "City Kiosk am Kröpcke" ist der zentralste Kiosk der Innenstadt. Die Kröpcke-Uhr (Namensgeber dieses Standorts) ist beliebter Treffpunkt der Hannoveraner, von hier aus kann in alle Richtungen der Stadt gestartet werden. Unsere erste Station befindet sich daher hier auf der Georgstraße in der Nähe des Hauptbahnhofs und bietet einen guten Einstieg für eine Kiosktour. Solltet ihr noch Bedarf nach einer Grundlage haben, findet ihr zum Beispiel in der Passerelle (einfach die Treppen hinuntergehen) eine große Auswahl an Bäckern oder Bistros.', 52.37439999999999, 9.738000000000056, 1],
  ['Kiosk Goethestraße', 'Mitte', 'Mitten im Rotlicht/Partyviertel liegt die nächste Station: "Goethestraße". Hannovers Steintor-Viertel ist bekannt für Partys bis in den nächsten Vormittag, Hamburg-Feeling in den Rotlicht-Gassen und türkische Spezialitäten für den Heißhunger nach einer durchfeierten Nacht. Der Zeitungskiosk bietet die nächste Abkühlung oder auch etwas zu lesen, solltet ihr nicht in der Stimmung sein, auf den Party-Zug aufzusteigen ;-P. Ein Abstecher in die Sansibar lohnt sich auch ab 5 Uhr morgens noch, hier wird House-, Charts- und auch Schlager-Musik gespielt.', 52.3746461, 9.730451799999969, 2],
  ['Glocksee Kiosk', 'Mitte', 'Das dritte Highlight dieser Kiosk-Tour liegt auf der Braunstraße in der Nähe der Glocksee. Das unabhängige Jugendzentrum Glocksee entstand 1972 im Stadtteil Calenberger Neustadt und gilt neben einer weiteren Institution zu einer der ältesten Einrichtungen dieser Art in Deutschland. Hier gibt es verschiedene Veranstaltungen, wie Flohmärkte, Konzerte und natürlich Partys. Wir sind nun fast im Stadtteil Linden angelangt. Wenn ihr mehr über diesen Kiosk erfahren wollt, bietet dieser sogar eine eigene Facebook-Seite! Dann mal Prost und weiter gehts!', 52.3738478, 9.71961269999997, 3],
  ['Unser Kiosk', 'Linden Nord', '"Unser Kiosk" ist ein kleiner aber feiner Einstieg in die sagenumwundene Limmer-Straße. Hier trifft man auf viele Kioskfreunde. Von der Limmerstraße leitet sich das in Hannover bekannte „Limmern“ ab. Es bedeutet so viel wie: gemütlich und sorgenfrei auf der Limmerstraße spazieren, mit einem Herri (Herrenhäuser Bier) in der Hand und Stopps an Kiosks und anderen Gruppen von netten Leuten, für ein Pläuschchen oder mehr! ;-) Findet es selbst heraus! Und gönnt euch vielleicht auch eine leckere bunte Tüte, wie in Kindheitstagen.', 52.3717078, 9.71202900000003, 4],
  ['Can Zer Kiosk', 'Linden Nord', 'Der nächste Stopp findet am viel besuchten "Kiosk Can Zer" statt. Hier werden nochmal alle Bedürfnisse gestillt, auch gegen den Hunger ist in der Umgebung eine große Auswahl zu finden. Viele Kiosks in Hannover bieten mittlerweile frisch gezapftes Bier vom Fass an, und das sogar für einen sehr guten Preis! Bei schönem Wetter ist dies für Studenten auf jeden Fall eine gute Option, um ein gutes, kaltes Bier zu trinken und dabei nicht in rote Zahlen abzudrifften. Noch ein Kiosk bis wir bei der Faust (Disko) ankommen, Prost!', 52.3731927, 9.70870919999993, 5],
  ['Lieblings KIOSK', 'Linden Nord', 'Der letzte Kiosk auf unserer Route ist der "Lieblings KIOSK". Hier trifft sich die Partygesellschaft auf dem Weg zur Faust. Wenn ihr noch Durst und vorallem Durchhaltevermögen habt, gibt es hier noch einmal Astra, Herri, Becks und Co. Aber natürlich auch Fritz Limo, Club Mate oder Paulaner Spezi-Freunde finden hier eine Erfrischung. Vielleicht ist dies auch eine gute Wahl, um den Türsteher der Faust nicht mit wankendem Gang einen Grund für die Eintrittsverweigerung zu geben … ;-)', 52.3749893, 9.708143000000064, 6],
  ['Faust', 'Linden Nord', 'Auf geht´s ins Tanzvergnügen! Ob bei Konzerten oder 90iger Partys - Hier könnt ihr richtig abtanzen und euch danach eine heiße Pizza gönnen. Je nach Veranstaltungen liegt hier der Eintritt meistens bei 5 €. Wollt ihr zu einer Erstsemesterparty empfiehlt sich früh da zu sein und am besten auch im Vorverkauf ein Ticket zu sichern, da diese sehr beliebt sind und ihr gerne mal lange anstehen oder sogar gar nicht mehr reinkommen könntet.', 52.375933, 9.71076800000003, 7]
];
googleMapGenerator.options.styles = [
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
      {
        lightness: 100
      },
      {
        visibility: 'simplified'
      }
    ]
  }, {
    featureType: 'landscape.man_made',
    elementType: 'geometry.fill',
    stylers: [
      {
        color: '#eceaed'
      }
    ]
  }, {
    featureType: 'landscape.natural',
    elementType: 'geometry.fill',
    stylers: [
      {
        color: '#78aa37'
      }
    ]
  }, {
    featureType: 'poi.park',
    elementType: 'geometry.fill',
    stylers: [
      {
        color: '#78aa37'
      }
    ]
  }, {
    featureType: 'water',
    elementType: 'geometry.fill',
    stylers: [
      {
        color: '#73a4e6'
      }
    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      {
        visibility: 'off'
      }
    ]
  }
];

// Init
var map = new googleMapGenerator();
              
            
!
999px

Console