Guest User

Untitled

a guest
Apr 24th, 2015
245
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2. var map;
  3. var marker;
  4.  
  5. function initialize() {
  6. var mapOptions = {
  7. zoom: 12
  8. };
  9. map = new google.maps.Map(document.getElementById('map-canvas'),
  10. mapOptions);
  11.  
  12. // Get GEOLOCATION
  13. if (navigator.geolocation) {
  14. navigator.geolocation.getCurrentPosition(function(position) {
  15. var pos = new google.maps.LatLng(position.coords.latitude,
  16. position.coords.longitude);
  17.  
  18. map.setCenter(pos);
  19. marker = new google.maps.Marker({
  20. position: pos,
  21. map: map,
  22. draggable: true
  23. });
  24. }, function() {
  25. handleNoGeolocation(true);
  26. });
  27. } else {
  28. // Browser doesn't support Geolocation
  29. handleNoGeolocation(false);
  30. }
  31.  
  32. function handleNoGeolocation(errorFlag) {
  33. if (errorFlag) {
  34. var content = 'Error: The Geolocation service failed.';
  35. } else {
  36. var content = 'Error: Your browser doesn\'t support geolocation.';
  37. }
  38.  
  39. var options = {
  40. map: map,
  41. position: new google.maps.LatLng(60, 105),
  42. content: content
  43. };
  44.  
  45. map.setCenter(options.position);
  46. marker = new google.maps.Marker({
  47. position: options.position,
  48. map: map,
  49. draggable: true
  50. });
  51.  
  52. }
  53.  
  54. // get places auto-complete when user type in location-text-box
  55. var input = /** @type {HTMLInputElement} */
  56. (
  57. document.getElementById('location-text-box'));
  58.  
  59.  
  60. var autocomplete = new google.maps.places.Autocomplete(input);
  61. autocomplete.bindTo('bounds', map);
  62.  
  63. var infowindow = new google.maps.InfoWindow();
  64. marker = new google.maps.Marker({
  65. map: map,
  66. anchorPoint: new google.maps.Point(0, -29),
  67. draggable: true
  68. });
  69.  
  70. google.maps.event.addListener(autocomplete, 'place_changed', function() {
  71. infowindow.close();
  72. marker.setVisible(false);
  73. var place = autocomplete.getPlace();
  74. if (!place.geometry) {
  75. return;
  76. }
  77.  
  78. // If the place has a geometry, then present it on a map.
  79. if (place.geometry.viewport) {
  80. map.fitBounds(place.geometry.viewport);
  81. } else {
  82. map.setCenter(place.geometry.location);
  83. map.setZoom(17); // Why 17? Because it looks good.
  84. }
  85. marker.setIcon( /** @type {google.maps.Icon} */ ({
  86. url: place.icon,
  87. size: new google.maps.Size(71, 71),
  88. origin: new google.maps.Point(0, 0),
  89. anchor: new google.maps.Point(17, 34),
  90. scaledSize: new google.maps.Size(35, 35)
  91. }));
  92. marker.setPosition(place.geometry.location);
  93. marker.setVisible(true);
  94.  
  95. var address = '';
  96. if (place.address_components) {
  97. address = [
  98. (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
  99. ].join(' ');
  100. }
  101.  
  102. });
  103.  
  104.  
  105.  
  106. }
  107.  
  108. google.maps.event.addDomListener(window, 'load', initialize);
  109. </script>
  110.  
  111. <style>
  112. html,
  113. body,
  114. #map-canvas {
  115. height: 100%;
  116. width: 100%;
  117. margin: 0px;
  118. padding: 0px
  119. }
  120. </style>
  121. <html>
  122. <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
  123. <div style="height:100%; width:100%">
  124. <input type="text" id="location-text-box" />
  125. <div id="map-canvas"></div>
  126. </div>
  127. </html>
RAW Paste Data