API tools faq
paste
BrU32

JS Google Maps Place Search Demo SRC

BrU32
Aug 18th, 2016
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.99 KB | None | 0 0
raw download clone embed print report
  1. <title>Places Search Demo SRC</title>
  2. <style>
  3. html, body {
  4.  
  5. padding: 0;
  6. }
  7. #map {
  8. height: 100%;
  9. }
  10. .controls {
  11.  
  12. }
  13.  
  14. #pac-input {
  15.  
  16. }
  17.  
  18. #pac-input:focus {
  19. border-color: #4d90fe;
  20. }
  21.  
  22. .pac-container {
  23. font-family: Ariel;
  24. }
  25.  
  26. #type-selector {
  27. color: #000;
  28. background-color: #4d90fe;
  29. padding: 5px 11px 0px 11px;
  30. }
  31.  
  32. #type-selector label {
  33. font-family: Ariel;
  34. font-size: 13px;
  35. font-weight: 300;
  36. }
  37. #target {
  38. width: 345px;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <input id="pac-input" class="controls" type="text" placeholder="Search Box">
  44. <div id="map"></div>
  45. <script>
  46.  
  47.  
  48. function init() {
  49. var map = new google.maps.Map(document.getElementById('map'), {
  50. center: {lat: 33.8688, lng: -117.2195},
  51. zoom: 15,
  52. mapTypeId: 'hybrid'
  53. });
  54.  
  55.  
  56. var input = document.getElementById('pac-input');
  57. var searchBox = new google.maps.places.SearchBox(input);
  58. map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  59.  
  60.  
  61. map.addListener('bounds_changed', function() {
  62. searchBox.setBounds(map.getBounds());
  63. });
  64.  
  65. var markers = [];
  66. // Listen for the event fired when the user selects a prediction and retrieve
  67. // more details for that place.
  68. searchBox.addListener('places_changed', function() {
  69. var places = searchBox.getPlaces();
  70.  
  71. if (places.length == 0) {
  72. //return;
  73. }
  74.  
  75. // Clear out the old markers.
  76. markers.forEach(function(marker) {
  77. marker.setMap(markers);
  78. });
  79. markers = [];
  80.  
  81. var bounds = new google.maps.LatLngBounds();
  82. places.forEach(function(place) {
  83. if (!place.geometry) {
  84. console.log("Returned place contains no geometry");
  85. return;
  86. }
  87. var icon = {
  88. url: place.icon,
  89. size: new google.maps.Size(71, 71),
  90. origin: new google.maps.Point(0, 0),
  91. anchor: new google.maps.Point(17, 34),
  92. scaledSize: new google.maps.Size(25, 25)
  93. };
  94.  
  95.  
  96. markers.push(new google.maps.Marker({
  97. map: map,
  98. icon: icon,
  99. title: place.name,
  100. position: place.geometry.location
  101. }));
  102.  
  103. if (place.geometry.viewport) {
  104. bounds.union(place.geometry.viewport);
  105. } else {
  106. bounds.extend(place.geometry.location);
  107. }
  108. });
  109. map.fitBounds(bounds);
  110. alert(place.geometry.location);
  111. });
  112. }
  113.  
  114. </script>
  115. <script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=init"
  116. async defer></script>
  117. </body>
  118. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!