-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update dinner search and movie search code
- Loading branch information
Showing
7 changed files
with
373 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,72 @@ | ||
| // https://developers.google.com/places/javascript/ | ||
| // google places API key | ||
| // AIzaSyBOvLvUWU-_rQ1MpLYVQCcZ1byL-Prp1po | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Dinner Search</title> | ||
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | ||
| <meta charset="utf-8"> | ||
| <style> | ||
| /* Always set the map height explicitly to define the size of the div | ||
| * element that contains the map. */ | ||
| #map { | ||
| height: 100%; | ||
| } | ||
| /* Optional: Makes the sample page fill the window. */ | ||
| html, body { | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| #floating-panel { | ||
| position: absolute; | ||
| top: 10px; | ||
| left: 25%; | ||
| z-index: 5; | ||
| background-color: #fff; | ||
| padding: 5px; | ||
| border: 1px solid #999; | ||
| text-align: center; | ||
| font-family: 'Roboto','sans-serif'; | ||
| line-height: 30px; | ||
| padding-left: 10px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="floating-panel"> | ||
| <input id="address" type="textbox" value="Zipcode"> | ||
| <input id="submit" type="button" value="Submit"> | ||
| </div> | ||
| <div id="map"></div> | ||
| <script> | ||
| function initMap() { | ||
| var map = new google.maps.Map(document.getElementById('map'), { | ||
| center: {lat: 34.0620, lng: -118.4455}, | ||
| zoom: 18 | ||
| }); | ||
| var geocoder = new google.maps.Geocoder(); | ||
|
|
||
| function initialize() { | ||
| var pyrmont = new google.maps.LatLng(-33.8665, 151.1956); | ||
| document.getElementById('submit').addEventListener('click', function() { | ||
| geocodeAddress(geocoder, map); | ||
| }); | ||
| } | ||
|
|
||
| var map = new google.maps.Map(document.getElementById('map'), { | ||
| center: pyrmont, | ||
| zoom: 15, | ||
| scrollwheel: false | ||
| }); | ||
|
|
||
| // Specify location, radius and place types for your Places API search. | ||
| var request = { | ||
| location: pyrmont, | ||
| radius: '500', | ||
| types: ['store'] | ||
| }; | ||
|
|
||
| // Create the PlaceService and send the request. | ||
| // Handle the callback with an anonymous function. | ||
| var service = new google.maps.places.PlacesService(map); | ||
| service.nearbySearch(request, function(results, status) { | ||
| if (status == google.maps.places.PlacesServiceStatus.OK) { | ||
| for (var i = 0; i < results.length; i++) { | ||
| var place = results[i]; | ||
| // If the request succeeds, draw the place location on | ||
| // the map as a marker, and register an event to handle a | ||
| // click on the marker. | ||
| var marker = new google.maps.Marker({ | ||
| map: map, | ||
| position: place.geometry.location | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| // Run the initialize function when the window has finished loading. | ||
| google.maps.event.addDomListener(window, 'load', initialize); | ||
| function geocodeAddress(geocoder, resultsMap) { | ||
| var address = document.getElementById('address').value; | ||
| geocoder.geocode({'address': address}, function(results, status) { | ||
| if (status === 'OK') { | ||
| resultsMap.setCenter(results[0].geometry.location); | ||
| var marker = new google.maps.Marker({ | ||
| map: resultsMap, | ||
| position: results[0].geometry.location | ||
| }); | ||
| } else { | ||
| alert('Geocode was not successful for the following reason: ' + status); | ||
| } | ||
| }); | ||
| } | ||
| </script> | ||
| <script async defer | ||
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOvLvUWU-_rQ1MpLYVQCcZ1byL-Prp1po&callback=initMap"> | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Place searches</title> | ||
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | ||
| <meta charset="utf-8"> | ||
| <style> | ||
| /* Always set the map height explicitly to define the size of the div | ||
| * element that contains the map. */ | ||
| #map { | ||
| height: 100%; | ||
| } | ||
| /* Optional: Makes the sample page fill the window. */ | ||
| html, body { | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| </style> | ||
| <script> | ||
| // This example requires the Places library. Include the libraries=places | ||
| // parameter when you first load the API. For example: | ||
| // <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOvLvUWU-_rQ1MpLYVQCcZ1byL-Prp1po&libraries=places"> | ||
|
|
||
| var map; | ||
| var infowindow; | ||
|
|
||
| function initMap() { | ||
| var pyrmont = {lat: -33.867, lng: 151.195}; | ||
|
|
||
| map = new google.maps.Map(document.getElementById('map'), { | ||
| center: pyrmont, | ||
| zoom: 15 | ||
| }); | ||
|
|
||
| infowindow = new google.maps.InfoWindow(); | ||
| var service = new google.maps.places.PlacesService(map); | ||
| service.nearbySearch({ | ||
| location: pyrmont, | ||
| radius: 500, | ||
| type: ['store'] | ||
| }, callback); | ||
| } | ||
|
|
||
| function callback(results, status) { | ||
| if (status === google.maps.places.PlacesServiceStatus.OK) { | ||
| for (var i = 0; i < results.length; i++) { | ||
| createMarker(results[i]); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function createMarker(place) { | ||
| var placeLoc = place.geometry.location; | ||
| var marker = new google.maps.Marker({ | ||
| map: map, | ||
| position: place.geometry.location | ||
| }); | ||
|
|
||
| google.maps.event.addListener(marker, 'click', function() { | ||
| infowindow.setContent(place.name); | ||
| infowindow.open(map, this); | ||
| }); | ||
| } | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div id="map"></div> | ||
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOvLvUWU-_rQ1MpLYVQCcZ1byL-Prp1po&libraries=places&callback=initMap" async defer></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Simple Map</title> | ||
| <meta name="viewport" content="initial-scale=1.0"> | ||
| <meta charset="utf-8"> | ||
| <style> | ||
| /* Always set the map height explicitly to define the size of the div | ||
| * element that contains the map. */ | ||
| #map { | ||
| height: 100%; | ||
| } | ||
| /* Optional: Makes the sample page fill the window. */ | ||
| html, body { | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="map"></div> | ||
| <script> | ||
| var map; | ||
| function initMap() { | ||
| map = new google.maps.Map(document.getElementById('map'), { | ||
| center: {lat: 34.0620, lng: -118.4455}, | ||
| zoom: 18 | ||
| }); | ||
| } | ||
| </script> | ||
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOvLvUWU-_rQ1MpLYVQCcZ1byL-Prp1po&callback=initMap" | ||
| async defer></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.