JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<button id="locateme">Locate Me</button>
<div id="map-canvas">map</div>

JavaScript

$(document).ready(function(){
  $("#locateme").click(function(){
    function locateme(position) {
        var mapOptions = {
          center: new google.maps.LatLng( position.coords.latitude, position.coords.longitude ),
          zoom: 16
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng( position.coords.latitude, position.coords.longitude ),
        map: map,
        animation: google.maps.Animation.DROP,
        title:"You are here!"
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
            function toggleBounce() {
              if (marker.getAnimation() != null) {
                marker.setAnimation(null);
              } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
              }
            }
            var url = "api.wunderground.com/api/MYAPIISHERE/conditions/q/" + position.coords.latitude
                + "," + position.coords.longitude + ".json";
            alert(url);
            $.ajax({ 
                url : "http://api.wunderground.com/api/MYAPIISHERE/conditions/q/53.443647000000006,-1.20211.json", 
                dataType : "jsonp",
                success : function(parsed_json) { 
                var location = parsed_json['current_observation']['display_location']['city'];
                var temp_c = parsed_json['current_observation']['temp_c'];
                alert("Provided by Weather Underground: Current temperature in " + location + " is: " + temp_c); 
                }
            });
      }
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(locateme);

    }       
    }); 
    });