Google Autocomplete API Search Places and Directions
Find direction and places using google map api using with bootstrap tab.
Load map in bootstrap tab.
Load map in bootstrap tab.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Place Autocomplete Address Form</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var directionsDisplay; | |
| var directionsService = new google.maps.DirectionsService(); | |
| var placesList; | |
| var placesMap; | |
| var placeSearch, autocomplete; | |
| //***************** Start : Load map Script ******************************** | |
| function initialize() | |
| { | |
| //Start: Autocomplete Address From Google | |
| var mapOptions = { | |
| center: new google.maps.LatLng(37.09024,-95.71289100000001), //**Default for United States | |
| zoom: 13 | |
| }; | |
| var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); | |
| var input = (document.getElementById('autocomplete')); | |
| // Create the autocomplete object, restricting the search | |
| // to geographical location types. | |
| autocomplete = new google.maps.places.Autocomplete((input),{ types: ['geocode'] }); | |
| autocomplete.bindTo('bounds', map); | |
| var infowindow = new google.maps.InfoWindow(); | |
| var marker = new google.maps.Marker({ | |
| map: map, | |
| anchorPoint: new google.maps.Point(0, -29) | |
| }); | |
| google.maps.event.addListener(autocomplete, 'place_changed', function() { | |
| var place = autocomplete.getPlace(); | |
| if (!place.geometry) { | |
| return; | |
| } | |
| $("#getLat").val(place.geometry.location.lat()); | |
| $("#getLng").val(place.geometry.location.lng()); | |
| infowindow.close(); | |
| marker.setVisible(false); | |
| var place = autocomplete.getPlace(); | |
| if (!place.geometry) { | |
| return; | |
| } | |
| // If the place has a geometry, then present it on a map. | |
| if (place.geometry.viewport) { | |
| map.fitBounds(place.geometry.viewport); | |
| } else { | |
| map.setCenter(place.geometry.location); | |
| map.setZoom(20); // Why 20? Because it looks good. | |
| } | |
| marker.setIcon(({ | |
| url: "img/pin.png", //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(35, 35) | |
| })); | |
| marker.setPosition(place.geometry.location); | |
| marker.setVisible(true); | |
| var address = ''; | |
| if (place.address_components) { | |
| address = [ | |
| (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 || '') | |
| ].join(' '); | |
| } | |
| infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); | |
| infowindow.open(map, marker); | |
| }); | |
| } | |
| // Bias the autocomplete object to the user's geographical location, | |
| // as supplied by the browser's 'navigator.geolocation' object. | |
| function geolocate() { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| var geolocation = new google.maps.LatLng( | |
| position.coords.latitude, position.coords.longitude); | |
| autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, | |
| geolocation)); | |
| }); | |
| } | |
| } | |
| //***************** END : Load map Script ******************************** | |
| //**************** Start: Directions Tab Script *********************************************** | |
| function loadDirections(lat,lng) | |
| { | |
| var geo = window.navigator.geolocation; | |
| if (geo) { | |
| geo.getCurrentPosition(showPos, showErr); | |
| } | |
| function showPos(pos) { | |
| var fromlat = pos.coords.latitude; | |
| var fromlng = pos.coords.longitude; | |
| calcRoute(fromlat,fromlng) | |
| } | |
| function showErr(err) { | |
| alert('Share location popup is block for this browser.'); | |
| console.log(err); | |
| } | |
| directionsDisplay = new google.maps.DirectionsRenderer(); | |
| var mapOptions = { | |
| zoom: 7, | |
| center: new google.maps.LatLng(lat, lng) | |
| }; | |
| var directionMap = new google.maps.Map(document.getElementById('directionsmap-canvas'), | |
| mapOptions); | |
| directionsDisplay.setMap(directionMap); | |
| directionsDisplay.setPanel(document.getElementById('directionsPanel')); | |
| } | |
| function calcRoute(from,to) { | |
| var fromLocation = new google.maps.LatLng(from, to); | |
| var toLocation = new google.maps.LatLng(lat, lng); | |
| var request = { | |
| origin: fromLocation, | |
| destination: toLocation, | |
| travelMode: google.maps.TravelMode.DRIVING | |
| }; | |
| directionsService.route(request, function(response, status) { | |
| if (status == google.maps.DirectionsStatus.OK) { | |
| directionsDisplay.setDirections(response); | |
| } | |
| }); | |
| } | |
| //**************** END: Directions Tab Script *********************************************** | |
| //*************** Start: Places Tab Script ************************************** | |
| function loadPlaces(lat,lng) | |
| { | |
| placesMap = new google.maps.Map(document.getElementById('walkScoreMapCanvas'), { | |
| center: new google.maps.LatLng(lat,lng), | |
| zoom: 20 | |
| }); | |
| var request = { | |
| location: new google.maps.LatLng(lat,lng), | |
| radius: 500, | |
| types: ['store'] | |
| }; | |
| placesList = document.getElementById('places'); | |
| var service = new google.maps.places.PlacesService(placesMap); | |
| service.nearbySearch(request, callback); | |
| } | |
| function callback(results, status, pagination) { | |
| if (status != google.maps.places.PlacesServiceStatus.OK) { | |
| return; | |
| } else { | |
| createMarkers(results); | |
| if (pagination.hasNextPage) { | |
| var moreButton = document.getElementById('more'); | |
| moreButton.disabled = false; | |
| google.maps.event.addDomListenerOnce(moreButton, 'click', | |
| function() { | |
| moreButton.disabled = true; | |
| pagination.nextPage(); | |
| }); | |
| } | |
| } | |
| } | |
| //******** Function Create Marker for Places | |
| function createMarkers(places) { | |
| var bounds = new google.maps.LatLngBounds(); | |
| for (var i = 0, place; place = places[i]; i++) { | |
| var image = { | |
| 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) | |
| }; | |
| var marker = new google.maps.Marker({ | |
| map: placesMap, | |
| icon: image, | |
| title: place.name, | |
| position: place.geometry.location | |
| }); | |
| placesList.innerHTML += '<li class="list-group-item">' + place.name + '</li>'; | |
| bounds.extend(place.geometry.location); | |
| } | |
| placesMap.fitBounds(bounds); | |
| } | |
| //*************** END: Places Tab Script ************************************** | |
| $(document).ready(function(e) | |
| { | |
| $('a[id="directionTab"]').on('shown.bs.tab', function (e) { | |
| loadDirections($("#getLat").val(),$("#getLng").val()); | |
| }) | |
| $('a[id="wlakScoreTab"]').on('shown.bs.tab', function (e) { | |
| loadPlaces($("#getLat").val(),$("#getLng").val()); | |
| }) | |
| initialize(); | |
| }); | |
| </script> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"><br> | |
| Enter Location<br> | |
| <input id="autocomplete" placeholder="Enter your address" type="text" size="100" onFocus="geolocate()"></input> | |
| <input type="hidden" id="getLat" name="getLat"> | |
| <input type="hidden" id="getLng" name="getLng"> | |
| <h1>Directions & Neighbourhood</h1> | |
| <div class="drawLine"></div> | |
| <ul class="nav nav-tabs" id="myTab"> | |
| <li class="active"><a href="#Map" data-toggle="tab" id="mapTab">Map</a></li> | |
| <li><a href="#Directions" data-toggle="tab" id="directionTab">Directions</a></li> | |
| <li><a href="#WalkScore" data-toggle="tab" id="wlakScoreTab">Walk Score</a></li> | |
| </ul> | |
| <div id="myTabContent" class="tab-content"> | |
| <div class="tab-pane fade in active" id="Map"> | |
| <div id="map-canvas" style="height:350px; margin-top:10px;"></div> | |
| </div> | |
| <div class="tab-pane fade" id="Directions"> | |
| <div class="col-md-8"> | |
| <div id="directionsmap-canvas" style="height:350px; margin-top:10px;"></div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div id="directionsPanel" style="height:350px; margin-top:10px;overflow: auto;"></div> | |
| </div> | |
| </div> | |
| <div class="tab-pane fade" id="WalkScore"> | |
| <div class="col-md-8"> | |
| <div id="walkScoreMapCanvas" style="height:350px; margin-top:10px;"></div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div style="height:350px; margin-top:10px;overflow: auto;"> | |
| <h2>Results</h2> | |
| <ul id="places" class="list-group"></ul> | |
| <button id="more" style="width: 100%;margin: 5px 0 0 0;">More results</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
DEMO
Comments
Post a Comment