kolunar · April 24, 2017 15:18
diff --git a/earthquake.html b/earthquake.html
 <!DOCTYPE html>
 <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>	  
        <style type="text/css">
            html, body { height: 100%; margin: 0; padding: 0; }
            #map { height: 100%; }
        </style>
    </head>
    <body>
        Click Here >> <button id="earthquakes">Show Earthquakes</button>
        <div id="map"></div>
        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrhmCE5YeH0r9Kkeq-v4ZXBd87UvwCOrw&callback=initMap">
        </script>
        <script>
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 4.8259171, lng: 63.3691405},
                    zoom: 1
                });
            }

            function createMarker(latlng, name) {
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: name
                });  
            }

            function displayMarkers() {    
                console.log('displayMarkers:'+latitd+':'+longtd+'\n');
                var latlng = new google.maps.LatLng(latitd, longtd);
                var name = titleName;
                createMarker(latlng, name);    
            }  

            var latitd;
            var longtd;
            var titleName; 

            var nowDate = new Date();
            var displayDate = nowDate.toJSON().slice(0,10);
            nowDate.setDate(nowDate.getDate() - 1);
            var yesterDate = nowDate.toJSON().slice(0,10);

            $(document).ready(function() {
                $('#earthquakes').click(function() {    
                    getQuakes();
                });

                function getQuakes() {
                    console.log('yesterDate:'+yesterDate+', displayDate:'+displayDate+'\n');
                    $.ajax({
                        url: 'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=' + yesterDate + '&endtime=' + displayDate,
                        dataType : 'json'
                    })
                        .done(function(data) {
                        console.log('data.features:'+data.features);
                        $.each(data.features, function(key, val) {
                            var coord = val.geometry.coordinates;
                            locationD = {
                                latd: coord[0],
                                lngd: coord[1]
                            };
                            latitd = locationD.latd;
                            longtd = locationD.lngd;
                            titleName = val.properties.title;

                            console.log(latitd, longtd);
                            console.log(titleName); 

                            displayMarkers();        
                        });
                    })
                        .fail(function(e){
                        console.log(e);
                    })
                        .always(function(){
                        console.log('ajax executed');
                    });
                }    
            });		
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<style type="text/css">
	html, body { height: 100%; margin: 0; padding: 0; }
	#map { height: 100%; }
	</style>
	</head>
	<body>
	Click Here >> <button id="earthquakes">Show Earthquakes</button>
	<div id="map"></div>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrhmCE5YeH0r9Kkeq-v4ZXBd87UvwCOrw&callback=initMap">
	</script>
	<script>
	var map;
	function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 4.8259171, lng: 63.3691405},
	zoom: 1
	});
	}

	function createMarker(latlng, name) {
	var marker = new google.maps.Marker({
	position: latlng,
	map: map,
	title: name
	});
	}

	function displayMarkers() {
	console.log('displayMarkers:'+latitd+':'+longtd+'\n');
	var latlng = new google.maps.LatLng(latitd, longtd);
	var name = titleName;
	createMarker(latlng, name);
	}

	var latitd;
	var longtd;
	var titleName;

	var nowDate = new Date();
	var displayDate = nowDate.toJSON().slice(0,10);
	nowDate.setDate(nowDate.getDate() - 1);
	var yesterDate = nowDate.toJSON().slice(0,10);

	$(document).ready(function() {
	$('#earthquakes').click(function() {
	getQuakes();
	});

	function getQuakes() {
	console.log('yesterDate:'+yesterDate+', displayDate:'+displayDate+'\n');
	$.ajax({
	url: 'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=' + yesterDate + '&endtime=' + displayDate,
	dataType : 'json'
	})
	.done(function(data) {
	console.log('data.features:'+data.features);
	$.each(data.features, function(key, val) {
	var coord = val.geometry.coordinates;
	locationD = {
	latd: coord[0],
	lngd: coord[1]
	};
	latitd = locationD.latd;
	longtd = locationD.lngd;
	titleName = val.properties.title;

	console.log(latitd, longtd);
	console.log(titleName);

	displayMarkers();
	});
	})
	.fail(function(e){
	console.log(e);
	})
	.always(function(){
	console.log('ajax executed');
	});
	}
	});
	</script>
	</body>
	</html>