Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Omar Khedr
661 PointsGoogle Maps API Changing Center based on a list of Cities on Rails App - Drop Down Menu
I apologize for the newbie question. I'm still figuring out the Google Maps API V3 as well as picking up Rails. I'm trying to change the center of the Google Map every time a user selects a different city from a drop down list. For eg., if a user selects New York City the map is centered on NYC and if they then choose Chicago it changes to Chicago. I was able to make this work for locations like Starbucks with respect to markers but can't seem to do it for cities. I have listed all my relevant code below. Thank you so much for your help.
_form.html.erb
<div class="field">
<%= f.label :city %><br>
<select name="item[city_id]" id="item_city_id">
<option></option>
<% City.all.each do |city| %>
<option value="<%= city.id %>" data-lat1="<%= city.latitude %>" data-lng1="<%= city.longitude %>"><%= city.name %></option>
<% end %>
</select>
</div>
<div class="field">
<%= f.label :location %><br>
<select name="item[location_id]" id="item_location_id">
<option></option>
<% Location.all.each do |location| %>
<option value="<%= location.id %>" data-lat="<%= location.latitude %>" data-lng="<%= location.longitude %>"><%= location.name %></option>
<% end %>
</select>
seeds.rb
City.destroy_all
nyc = City.create!(name:"New York City", latitude: 40.7128, longitude: -74.0059)
sf = City.create!(name:"San Francisco", latitude: 37.7749, longitude: -122.4194)
austin = City.create!(name:"Austin", latitude: 30.2672, longitude: -97.7431)
la = City.create!(name:"Los Angeles", latitude: 34.0522, longitude: -118.2437)
Location.destroy_all
starbuck = nyc.locations.create!(name: "Starbucks", latitude: 40.7435331, longitude: -73.9182956)
thinkcofee = nyc.locations.create!(name: "Think Coffee", latitude: 40.751, longitude: -73.992)
coffeeController.js
CoffeeController = {
initialize: function() {
this.createMap();
this.getLocationOnSelect();
this.getCityOnSelect();
},
markers: [],
createMap: function(){
getCityOnSelect: function(){
$("#item_city_id").change(function(e){
console.log(e);
$( "select option:selected" ).each(function() {
lng = parseFloat($( this ).data('lng1'))
lat = parseFloat($( this ).data('lat1'))
});
})
},
map = new google.maps.Map(document.getElementById('map'),{
center: getCityOnSelect,
zoom: 11,
mapTypeControl: false
});
},
getLocationOnSelect: function(){
$("#item_location_id").change(function(e){
console.log(e);
$( "select option:selected" ).each(function() {
lng = parseFloat($( this ).data('lng'))
lat = parseFloat($( this ).data('lat'))
CoffeeController.createmarker(lat, lng)
});
})
},
destroyMarkers: function(){
for(var i=0; i< this.markers.length; i++){
this.markers[i].setMap(null)
}
},
createmarker: function(lat, lng){
this.destroyMarkers();
var marker = new google.maps.Marker({
position: { lat: lat, lng: lng},
map: map
});
CoffeeController.markers.push(marker)
}
}
function initMap(){
CoffeeController.initialize();
}
$(document).ready(function(){
});
1 Answer
Omar Khedr
661 Pointsits all good Caleb sir
Caleb Kleveter
Treehouse Moderator 37,862 PointsCaleb Kleveter
Treehouse Moderator 37,862 PointsSorry Omar. Not really sure what is going on here. I am not very proficient in ruby or JS. Hope you get an answer!