-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Linda Krausz
authored and
Linda Krausz
committed
Feb 20, 2024
1 parent
d4f372b
commit 938775a
Showing
4 changed files
with
292 additions
and
8 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
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,170 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | ||
| <title>Google Maps Multiple Markers</title> | ||
| <script src="https://maps.google.com/maps/api/js?key=AIzaSyAYBKGusllIEoLJwgC2e8mfJl83J2CHZR0&libraries=places" | ||
| type="text/javascript"></script> | ||
| </head> | ||
| <body> | ||
| <input | ||
| id="pac-input" | ||
| class="controls" | ||
| type="text" | ||
| placeholder="Search Box" | ||
| /> | ||
| <div id="map" style="width: 1200px; height: 900px;"></div> | ||
|
|
||
| <script type="text/javascript"> | ||
|
|
||
| async function initMap() { | ||
|
|
||
| //function initAutocomplete() { | ||
| //var url ="https://tweednswgovau.sharepoint.com/sites/Traffic/Traffic%20Monitoring/FME/DocSetUrls.csv"; | ||
| var url ="data/DocSetUrls.csv"; | ||
| var request = new XMLHttpRequest(); | ||
|
|
||
| request.open("GET", url, false); | ||
| request.send(null); | ||
|
|
||
| var csvData = new Array(); | ||
| var jsonObject = request.responseText.split(/\r?\n|\r/); | ||
| for (var i = 0; i < jsonObject.length; i++) { | ||
| if(jsonObject[i].length > 0) { //skip last empty row | ||
| csvData.push(jsonObject[i].split(',')); | ||
| } | ||
| } | ||
| // Retrived data from csv file content | ||
| // console.log(csvData); | ||
| /* | ||
| var locations = [ | ||
| ['Bondi Beach', -33.890542, 151.274856, 4], | ||
| ['Coogee Beach', -33.923036, 151.259052, 5], | ||
| ['Cronulla Beach', -34.028249, 151.157507, 3], | ||
| ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], | ||
| ['Maroubra Beach', -33.950198, 151.259302, 1] | ||
| ]; | ||
| */ | ||
|
|
||
|
|
||
|
|
||
| const { Map } = await google.maps.importLibrary("maps"); | ||
| const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); | ||
|
|
||
| var map = new Map(document.getElementById('map'), { | ||
| zoom: 13, | ||
| center: new google.maps.LatLng(-28.247382, 153.479403), | ||
| mapTypeId: google.maps.MapTypeId.ROADMAP | ||
| }); | ||
|
|
||
| // Create the search box and link it to the UI element. | ||
| const input = document.getElementById("pac-input"); | ||
| const searchBox = new google.maps.places.SearchBox(input); | ||
|
|
||
| map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); | ||
| // Bias the SearchBox results towards current map's viewport. | ||
| map.addListener("bounds_changed", () => { | ||
| searchBox.setBounds(map.getBounds()); | ||
| }); | ||
|
|
||
| let markers = []; | ||
|
|
||
|
|
||
| // Listen for the event fired when the user selects a prediction and retrieve | ||
| // more details for that place. | ||
| searchBox.addListener("places_changed", () => { | ||
| const places = searchBox.getPlaces(); | ||
|
|
||
| if (places.length == 0) { | ||
| return; | ||
| } | ||
|
|
||
|
|
||
| // Clear out the old markers. | ||
| /* | ||
| markers.forEach((marker) => { | ||
| marker.setMap(null); | ||
| }); | ||
| markers = []; | ||
| */ | ||
|
|
||
| // For each place, get the icon, name and location. | ||
| const bounds = new google.maps.LatLngBounds(); | ||
|
|
||
| places.forEach((place) => { | ||
| if (!place.geometry || !place.geometry.location) { | ||
| console.log("Returned place contains no geometry"); | ||
| return; | ||
| } | ||
|
|
||
| const icon = { | ||
| url: place.icon, | ||
| size: new google.maps.Size(71, 71), | ||
| origin: new google.maps.Point(0, 0), | ||
| anchor: new google.maps.Point(17, 34), | ||
| scaledSize: new google.maps.Size(25, 25), | ||
| }; | ||
|
|
||
| // Create a marker for each place. | ||
| markers.push( | ||
| new google.maps.Marker({ | ||
| map, | ||
| icon, | ||
| title: place.name, | ||
| position: place.geometry.location, | ||
| }), | ||
| ); | ||
| if (place.geometry.viewport) { | ||
| // Only geocodes have viewport. | ||
| bounds.union(place.geometry.viewport); | ||
| } else { | ||
| bounds.extend(place.geometry.location); | ||
| } | ||
| }); | ||
| map.fitBounds(bounds); | ||
|
|
||
| }); | ||
|
|
||
|
|
||
| var infowindow = new google.maps.InfoWindow(); | ||
|
|
||
| var marker, i; | ||
|
|
||
|
|
||
| for (i = 0; i < csvData.length; i++) { | ||
|
|
||
| console.log(csvData[i]); | ||
| // try{ | ||
| // marker = new AdvancedMarkerElement({ | ||
|
|
||
| //see this page: https://developers.google.com/maps/documentation/javascript/advanced-markers/add-marker | ||
|
|
||
| marker = new google.maps.Marker({ | ||
| // position: new google.maps.LatLng(locations[i][1], locations[i][2]), | ||
| // map, | ||
| position: new google.maps.LatLng(parseFloat(csvData[i][2].replace(/['"]+/g,'')), parseFloat(csvData[i][3].replace(/['"]+/g,''))), | ||
| map: map | ||
| }); | ||
|
|
||
| google.maps.event.addListener(marker, 'click', (function(marker, i) { | ||
| return function() { | ||
| infowindow.setContent("<a href='"+ csvData[i][4]+"' target='_blank'>"+csvData[i][0]+"-"+csvData[i][1]+"</a>"); | ||
| infowindow.open(map, marker); | ||
| } | ||
| })(marker, i)); | ||
| // console.log(parseFloat(csvData[i][2].replace(/['"]+/g,'')), '-',csvData[i][2]); | ||
| //}catch(ex){} | ||
| } | ||
|
|
||
| } | ||
| initMap(); | ||
|
|
||
| /*} | ||
| window.initAutocomplete = initAutocomplete; | ||
| */ | ||
|
|
||
|
|
||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <!DOCTYPE html> | ||
| <head> | ||
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYBKGusllIEoLJwgC2e8mfJl83J2CHZR0&lbraries=places"> | ||
| <script> | ||
| // This example adds a search box to a map, using the Google Place Autocomplete | ||
| // feature. People can enter geographical searches. The search box will return a | ||
| // pick list containing a mix of places and predicted search terms. | ||
| // This example requires the Places library. Include the libraries=places | ||
| // parameter when you first load the API. For example: | ||
| // | ||
| function initAutocomplete() { | ||
| const map = new google.maps.Map(document.getElementById("map"), { | ||
| center: { lat: -33.8688, lng: 151.2195 }, | ||
| zoom: 13, | ||
| mapTypeId: "roadmap", | ||
| }); | ||
| // Create the search box and link it to the UI element. | ||
| const input = document.getElementById("pac-input"); | ||
| const searchBox = new google.maps.places.SearchBox(input); | ||
|
|
||
| map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); | ||
| // Bias the SearchBox results towards current map's viewport. | ||
| map.addListener("bounds_changed", () => { | ||
| searchBox.setBounds(map.getBounds()); | ||
| }); | ||
|
|
||
| let markers = []; | ||
|
|
||
| // Listen for the event fired when the user selects a prediction and retrieve | ||
| // more details for that place. | ||
| searchBox.addListener("places_changed", () => { | ||
| const places = searchBox.getPlaces(); | ||
|
|
||
| if (places.length == 0) { | ||
| return; | ||
| } | ||
|
|
||
| // Clear out the old markers. | ||
| markers.forEach((marker) => { | ||
| marker.setMap(null); | ||
| }); | ||
| markers = []; | ||
|
|
||
| // For each place, get the icon, name and location. | ||
| const bounds = new google.maps.LatLngBounds(); | ||
|
|
||
| places.forEach((place) => { | ||
| if (!place.geometry || !place.geometry.location) { | ||
| console.log("Returned place contains no geometry"); | ||
| return; | ||
| } | ||
|
|
||
| const icon = { | ||
| url: place.icon, | ||
| size: new google.maps.Size(71, 71), | ||
| origin: new google.maps.Point(0, 0), | ||
| anchor: new google.maps.Point(17, 34), | ||
| scaledSize: new google.maps.Size(25, 25), | ||
| }; | ||
|
|
||
| // Create a marker for each place. | ||
| markers.push( | ||
| new google.maps.Marker({ | ||
| map, | ||
| icon, | ||
| title: place.name, | ||
| position: place.geometry.location, | ||
| }), | ||
| ); | ||
| if (place.geometry.viewport) { | ||
| // Only geocodes have viewport. | ||
| bounds.union(place.geometry.viewport); | ||
| } else { | ||
| bounds.extend(place.geometry.location); | ||
| } | ||
| }); | ||
| map.fitBounds(bounds); | ||
| }); | ||
| } | ||
|
|
||
| window.initAutocomplete = initAutocomplete; | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <input | ||
| id="pac-input" | ||
| class="controls" | ||
| type="text" | ||
| placeholder="Search Box" | ||
| /> | ||
| <div id="map"></div> | ||
|
|
||
|
|
||
| </body> | ||
| </html> |