JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=true"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<section id="map_canvas"></section>
<section id="title">
    <h1>Hey, ho<br />Let's go!!</h1>
    <article id="intro"><p>We'll give you a hint where to go. See if it's interesting enough for you!</p><p>Pick a spot by dragging the marker!</p></article>
    <article id="info"></article>
    <article id="weather"></article>
    <article id="events"></article>
    <article id="tweets"></article>
    <article id="photos"></article>
    <article id="locs"></article>
</section>

CSS

/* CLASSES */

/* Helpers */


/* IDS */

/* Global structure */
#map_canvas { width: 100%; height: 100%; }
#title { position: absolute; right: 222px; top: -15px; width: 272px; padding: 22px 22px; height: auto; background: rgba( 255, 255, 255, 0.85); border-radius: 0 0 22px 5px;  padding-bottom: 22px; /*transform: rotate(1deg); -webkit-transform: rotate(1deg);*/ box-shadow: 3px 3px 7px rgba( 55,55,55,0.4), -3px -3px 7px rgba( 77,77,77,0.4)}
#title h1 {
    font-family: Georgia; font-weight: bold; font-style: italic; font-size: 38px; text-transform: uppercase; line-height: 40px; text-shadow: 2px 2px 2px rgba( 55, 55, 55, 0.5 ), -1px -1px 4px rgba( 55, 55, 55, 0.1 ); color: #333;
    padding-bottom: 7px; border-bottom: 3px solid #333; margin-bottom: 7px;
}
#title article { font-family: ff-enzo-web; font-weight: normal; font-style: italic; font-size: 12px; line-height: 17px; padding-bottom: 5px; margin-bottom: 0px; border-bottom: 3px solid #333; }
#title article#intro { font-size: 14px; line-break: 19px; }
#title .go {
    display: block; width: 100%;
    text-align: center; padding: 7px 0; border-radius: 0 0 11px 3px; 
    background: rgba( 0,0,0,0.7); color: white; text-transform: uppercase; font-family: ff-enzo-web; font-weight: bold; font-size: 19px;
}
#title .go:hover { text-decoration: none; text-shadow: 2px 2px 2px rgba( 55, 55, 55, 0.6 ), -1px -1px 4px rgba( 55, 55, 55, 0.3 ); }
#photos img { margin-right: 23px; }
#title #photos img:last-child { margin-right: 0px; }

JavaScript

// check for geolocation & start function
        if( !navigator.geolocation ) { alert( 'no geolocation?!' ); } else { var loc = navigator.geolocation.getCurrentPosition( handler ); }

        function handler(position) {
            showMap(position.coords.latitude, position.coords.longitude, false);
        }

        function showMap(lat,lng,map) {
            var currentPosition = new google.maps.LatLng(lat, lng);
            var mapOptions         = {zoom: 3, mapTypeId: google.maps.MapTypeId.TERRAIN, center: currentPosition, mapTypeControl: false, scrollwheel: false};
            if( !map ){
                var map         = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );
            } else {
                map.panTo( currentPosition );
            }
            var marker             = new google.maps.Marker({animation: google.maps.Animation.DROP,position:currentPosition, map:map, draggable: true });
            var geocoder         = new google.maps.Geocoder();
            
            google.maps.event.addListener(marker, 'dragend', function() {
                var position = marker.getPosition();
                map.panTo(position);
                
                // local weather                           
                var lat = Number( position.lat()).toFixed(2);
                var lng = Number( position.lng()).toFixed(2);
                var weatherUrl = 'http://free.worldweatheronline.com/feed/weather.ashx?q=' + lat + ',' + lng + '&format=json&num_of_days=2&key=99e6196b65204344111509';                
                $.ajax({
                    url: weatherUrl,
                    dataType: 'jsonp',
                    success: function( data ) {
                        var weather = data.data.current_condition[0];
                        var weatherDesc = weather.weatherDesc;
                        weatherDesc = weatherDesc[0];
                        var weatherValue = '<h2>Weather</h2>' + weather.temp_C + '&deg;C...