Search

GoogleMap's Tags

Auto Complete City Google Map API In Laravel
Hello, everyone in this tutorials we are share with you how to use google map's autocompleted fill city API in youe laravel application in your form. this is very easy and many time require in any application in register form and any other form. In this tutorials we are show you country base autocomplete city in text box. We are create one simple example for autocomplete city API usign google map's API. simple follow this step for integrate in your laravel application Step : 1 Create Route First we are create one route in your routes/web.php file Route::get('auto-complete-city', 'AutoCompleteController@index')->name('auto-complete-city'); Step : 2 Create controller Now we are create AutoCompleteController in app/Http/Controllers folder namespace App\Http\Controllers; use App\Http\Requests; use Illuminate\Http\Request; use DB; use PDF; class AutoCompleteController extends Controller { /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ public function index(Request $request) { return view('auto-complete-city'); } } Step : 3 Create Blade File [ADDCODE] Into the last we are create one blade file and simple put into it following code. <!DOCTYPE html> <html> <head> <title>User list - PDF</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY&libraries=places®ion=in"></script> </head> <body> <div class="container"> <form> <div class="form-group"> <label>City<star>*</star></label> <input type="text" name="city" placeholder="City" class="form-control" value="{{ old('city') }}" id="city"> </div> </form> <script type="text/javascript"> function initialize() { var options = { types: ['(cities)'], componentRestrictions: {country: "in"} }; var input = document.getElementById('city'); var autocomplete = new google.maps.places.Autocomplete(input, options); } google.maps.event.addDomListener(window, 'load', initialize); </script> </div> </body> </html> Now we are ready to run our example so run bellow command ro quick run: php artisan serve Now you can open bellow URL on your browser: http://localhost:8000/auto-complete-city If you face any problem then please write a comment or give some suggestions for improvement. Thanks...
GEO Location Track In Google Map With JavaScript
Today, Laravelcode share with you how to track two starting and ending location point in google map with javascript. we are working on one transport related project in laravel and we are required this type starting and ending location point tracking in real time. we have done with javascript. Google map API provide more API functionality for google map. this tutorials also base one one of the google map API. it related to location tracking. We are write here some basic step for how to integrate location tracking in very simple way. Step : 1 Create index.php file First create one index.php file for show google map and then put into it following code. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <title>Location Track - Laravelcode</title> <style> #map {height: 100%;} html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; right: 1%; z-index: 5; background-color: #fff; border: 1px solid #999; text-align: center; } </style> </head> <body> <div id="floating-panel"> <b>Start1: </b> <input tye="text" id="start1" value="Mumbai"><!-- Starting Location --> <b>End1: </b> <input type="text" id="end1" value="Delhi"><!-- Ending Location --> </div> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY&callback=initMap&libraries=places,geometry"></script> </body> </html> After done this then copy following javascript code and also put into in after map div into script tag [ADDCODE] function calcDistance(p1, p2) {//p1 and p2 in the form of google.maps.LatLng object return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(3);//distance in KiloMeters } function getLocation() { if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} else {alert("Geolocation is not supported by this browser.");} } function showPosition(position) { alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("User denied the request for Geolocation."); break; case error.POSITION_UNAVAILABLE: alert("Location information is unavailable."); break; case error.TIMEOUT: alert("The request to get user location timed out."); break; case error.UNKNOWN_ERROR: alert("An unknown error occurred."); break; } } function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: { lat: 18.9965041, lng: 72.8194209 } }); var waypts = [];//origin to destination via waypoints //waypts.push({location: 'indore', stopover: true}); function continuouslyUpdatePosition(location){//Take current location from location.php and set marker to that location var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var pos = JSON.parse(this.responseText); location.setPosition(new google.maps.LatLng(pos.lat,pos.lng)); setTimeout(function(){ continuouslyUpdatePosition(location); },5000); } }; xhttp.open("GET", "location.php", true); xhttp.send(); } /* Distance between p1 & p2 var p1 = new google.maps.LatLng(45.463688, 9.18814); var p2 = new google.maps.LatLng(46.0438317, 9.75936230000002); alert(calcDistance(p1,p2)+" Kilimeters"); */ //Make marker at any position in form of {lat,lng} function makeMarker(position /*, icon*/) { var marker = new google.maps.Marker({ position: position, map: map, /*animation: google.maps.Animation.DROP,*/ /*icon: icon,*/ }); return marker; } var icons = { end: new google.maps.MarkerImage('http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Push-Pin-1-Left-Pink-icon.png'), start: new google.maps.MarkerImage('http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Push-Pin-1-Left-Chartreuse-icon.png') }; //Show suggestions for places, requires libraries=places in the google maps api script link var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('start1')); var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('end1')); var directionsService1 = new google.maps.DirectionsService; var directionsDisplay1 = new google.maps.DirectionsRenderer({ polylineOptions: {strokeColor: "red"}, //path color //draggable: true,// change start, waypoints and destination by dragging /* Start and end marker with same image markerOptions : {icon: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Push-Pin-1-Left-Pink-icon.png'}, */ //suppressMarkers: true }); directionsDisplay1.setMap(map); var onChangeHandler1 = function() {calculateAndDisplayRoute(directionsService1, directionsDisplay1, $('#start1'),$('#end1'));}; $('#start1,#end1').change(onChangeHandler1); function calculateAndDisplayRoute(directionsService, directionsDisplay, start, end) { directionsService.route({ origin: start.val(), destination: end.val(), waypoints: waypts, travelMode: 'DRIVING' }, function(response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); var leg = response.routes[ 0 ].legs[ 0 ]; // Move marker along path from A to B var markers = []; for(var i=0; i<leg.steps.length; i++){ var marker = makeMarker(leg.steps[i].start_location); markers.push(marker); marker.setMap(null); } tracePath(markers, 0); var location = makeMarker(leg.steps[0].start_location); continuouslyUpdatePosition(location); } else {window.alert('Directions request failed due to ' + status);} }); } function tracePath(markers, index){// move marker along path from A to B if(index==markers.length) return; markers[index].setMap(map); setTimeout(function(){ markers[index].setMap(null); tracePath(markers, index+1); },500); } calculateAndDisplayRoute(directionsService1, directionsDisplay1, $('#start1'),$('#end1')); } Step : 2 Create location.php file Now, create one location.php file for get all dynamic location from database. we are show here static location but if you want get from database then you make it dynamic $lat = 23.6838716; $lng = 73.37194090000003; echo '{"lat":"'.$lat.'", "lng":"'.$lng.'"}'; If you face any problem then please write a comment or give some suggestions for improvement. Thanks...