javascript - Showing current location with Google Places -


i used sample code below show autocomplete search google places. defaults current location sydney, australia.

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

i gathering user location latitude , longitude:

schema.rb

  create_table "users", force: :cascade |t|     t.datetime "created_at", null: false     t.datetime "updated_at", null: false     t.float    "latitude"     t.float    "longitude"   end 

how modify assume part (not sure why there 2 sets of coordinates there)

 var defaultbounds = new google.maps.latlngbounds(      new google.maps.latlng(-33.8902, 151.1759),      new google.maps.latlng(-33.8474, 151.2631));  map.fitbounds(defaultbounds); 

to default user's current location?

i have built similar solution in rails. make ajax request method in rails controller , return user record json can used setup our map. have adapted code fit exact needs.

let's start setting separate js file under asset pipeline:

place following under /app/assets/javascripts/gmap.js

  var worldmap = {     init: function(){       // fetch our user record lat/long       $.ajax({         url: '/user/location',         datatype: 'json',         success: function( data ){           worldmap.lat = data.latitude;           worldmap.lng = data.longitude;           worldmap.setupmap();         }       });     },     setupmap: function(){       // have user location loaded build map       worldmap.map = new google.maps.map( document.getelementbyid( "map" ), {         zoom: 3,         center: {           lat: worldmap.lat,           lng: worldmap.lng         }       });        // lets add autocomplete search       var searchbox = (document.getelementbyid('search-controls'));       var input = document.getelementbyid('pac-input');       worldmap.map.controls[ google.maps.controlposition.left_top ].push( searchbox );        var autocomplete = new google.maps.places.autocomplete(input);       autocomplete.bindto('bounds', worldmap.map);        google.maps.event.addlistener(autocomplete, 'place_changed', function() {         var place = autocomplete.getplace();         if (!place.geometry) { return; }          // center map on chosen location         if (place.geometry.viewport) {           worldmap.map.fitbounds(place.geometry.viewport);         } else {           worldmap.map.setcenter(place.geometry.location);           worldmap.map.setzoom(17);         }       });     }   } 

then can call our new map setup code once dom has loaded, add /app/assets/javascripts/application.js:

window.onload = function(){   worldmap.init(); } 

now can setup our routes, add line /config/routes.rb:

get 'user/location', :controller => 'users', :action => 'user_location', :as => 'user_latlng' 

then add method our users controller /app/controllers/users_controller.rb:

def user_location   @user = user.select(:latitude, :longitude).where(id: current_user.id).limit(1)   render json: @user.first end 

in view want have search box , map div our js looking for:

<div id="search-controls" class="controls">   <input type="text" id="pac-input" placeholder="search" /> </div>  <div id="map"></div> 

Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - Chrome Extension: Interacting with iframe embedded within popup -