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
Post a Comment