99 <meta charset="utf-8">
1010 <title>全台灣郵筒位置地圖</title>
1111 <style>
12- /* Always set the map height explicitly to define the size of the div
13- * element that contains the map. */
1412 #map {
1513 height: 100%;
1614 }
17- /* Optional: Makes the sample page fill the window. */
1815 html, body {
1916 height: 100%;
2017 margin: 0;
9592 </style>
9693 </head>
9794 <body>
95+ <h1>全台灣郵筒位置地圖</h1>
9896 <input id="pac-input" class="controls" type="text" placeholder="搜尋地點">
9997 <div id="map"></div>
10098 <script>
101- // This example adds a search box to a map, using the Google Place Autocomplete
102- // feature. People can enter geographical searches. The search box will return a
103- // pick list containing a mix of places and predicted search terms.
104-
105- // This example requires the Places library. Include the libraries=places
106- // parameter when you first load the API. For example:
107- // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
108-
10999 function initAutocomplete() {
110100 var taiwan = {lat: 23.5, lng: 121};
111101 var marker
@@ -67737,28 +67727,13 @@
6773767727 }
6773867728 ]
6773967729
67740- // Add some markers to the map.
67741- // Note: The code uses the JavaScript Array.prototype.map() method to
67742- // create an array of markers based on a given "locations" array.
67743- // The map() method here has nothing to do with the Google Maps API.
6774467730 var image = {
6774567731 url: 'public/postbox.svg',
67746- // This marker is 20 pixels wide by 32 pixels high.
6774767732 scaledSize: new google.maps.Size(50, 50),
67748- // The origin for this image is (0, 0).
6774967733 origin: new google.maps.Point(0, 0),
67750- // The anchor for this image is the base of the flagpole at (0, 32).
6775167734 anchor: new google.maps.Point(0, 32)
6775267735 };
6775367736
67754- // var post_markers = locations.map(function(location, i) {
67755-
67756- // return new google.maps.Marker({
67757- // position: new google.maps.LatLng(locations[i]["lat"], locations[i]["lng"]),
67758- // icon: image,
67759- // title: location[i]["postbox_type"]
67760- // });
67761- // });
6776267737 var post_markers = [];
6776367738 function bindInfoWindow(marker, map, infowindow, html) {
6776467739 marker.addListener('click', function() {
@@ -67778,45 +67753,32 @@
6777867753 var infowindow = new google.maps.InfoWindow();
6777967754 var contentString = '<h4>'+ locations[i]["postbox_type"] + '</h4><p>'+ locations[i]["full_address"] +'</p>';
6778067755 bindInfoWindow(marker, map, infowindow, contentString);
67781- // var infowindow = new google.maps.InfoWindow({
67782- // content: contentString
67783- // });
67784- // marker.addListener('click', function() {
67785- // infowindow.open(map, marker);
67786- // });
6778767756 }
6778867757
67789- // Add a marker clusterer to manage the markers.
6779067758 var markerCluster = new MarkerClusterer(map, post_markers,
6779167759 {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
6779267760
67793- // Create the search box and link it to the UI element.
6779467761 var input = document.getElementById('pac-input');
6779567762 var searchBox = new google.maps.places.SearchBox(input);
6779667763 map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
6779767764
67798- // Bias the SearchBox results towards current map's viewport.
6779967765 map.addListener('bounds_changed', function() {
6780067766 searchBox.setBounds(map.getBounds());
6780167767 });
6780267768
6780367769 var markers = [];
67804- // Listen for the event fired when the user selects a prediction and retrieve
67805- // more details for that place.
6780667770 searchBox.addListener('places_changed', function() {
6780767771 var places = searchBox.getPlaces();
6780867772
6780967773 if (places.length == 0) {
6781067774 return;
6781167775 }
6781267776
67813- // Clear out the old markers.
6781467777 markers.forEach(function(marker) {
6781567778 marker.setMap(null);
6781667779 });
6781767780 markers = [];
6781867781
67819- // For each place, get the icon, name and location.
6782067782 var bounds = new google.maps.LatLngBounds();
6782167783 places.forEach(function(place) {
6782267784 if (!place.geometry) {
6783167793 scaledSize: new google.maps.Size(25, 25)
6783267794 };
6783367795
67834- // Create a marker for each place.
6783567796 markers.push(new google.maps.Marker({
6783667797 map: map,
6783767798 icon: icon,
6784067801 }));
6784167802
6784267803 if (place.geometry.viewport) {
67843- // Only geocodes have viewport.
6784467804 bounds.union(place.geometry.viewport);
6784567805 } else {
6784667806 bounds.extend(place.geometry.location);
0 commit comments