Google Maps in rails 3
I already wrote a blog on how to use Google maps in rails. Earlier blog is supported in rails 2.3.x version.
To supoort rails 3 application , certain changes are required in plugin.
Here I will show you what are those changes required.
Download YM4R plugin :
rails plugin install https://github.com/rorcraft/ym4r_gm
1. Add following method in class Varible under gm_plugin/mapping.rb
def to_str @variable + “;” end
2. Use raw method for each google maps methods to avoid html contents.
<%= raw GMap.header %> <%= raw @map.to_html %> <%= raw @map.div(:width => 600, :height => 400) %>
4. Add Ym4r js in your layouts
<%=javascript_include_tag :defaults,"ym4r-gm"%>
5. Commented line no: 35 in ym4r/lib/gm_plugin/map.rb
# a << "<script src=\"/public/javascripts/ym4r-gm.js\" type=\"text/javascript\"></script>\n" unless options[:without_js]
I hope this blog helps you. Let me know if you still facing any problem.
Themocracy
[...] Note: to support rails 3 application, certain changes are required in plugin. Those changes listed out here [...]
Hi, thanks for the tutorial, it seemed very clear and easy to follow. But I have some problems…
So I followed the steps and when I tried to load my application this error popped up regarding the “” line: uninitialized constant ActionView::CompiledTemplates::GMap. Do you have any suggestions? I have already installed the ym4r_gm gem and the ym4r gem.
(And if i was not clear, I’m using Rails 3)
Hi Margi,
Do not use gem. Install Ym4r_gm plugin from the git and try it.
Thanks
Brijesh Shah
Hi, thanks for the speedy reply, I installed from the git (uninstalled the gems) and the same error appeared regarding the same line… Any more tips please? Thank you!
Hi, never mind about the same error. Turns out I missed a capital M… (Stupid mistake). But I had a question about the ” line. Does that always have to be in the header? Or can I put that line in the body as well?
Hi
You can put it in body part also..but because that method load javascript files , I prefer in head method.
Thanks
Brijesh Shah
Thank you! =D
This blog is very useful for me. i need both right and left click for marker on map.how to do this.
Thanks
I think you are so busy thats only you dint reply me. Please help me. how to do right click on marker of map. i am using ym4r_gm plugin and geokit gem for finding lat and lng.
Hi NanaPriya,
Sorry for late reply..
For left click you can use following code..
@map.event_init(@map, :click, “function(marker,point) { if (marker) { map.removeOverlay(marker); } else { map.addOverlay(new GMarker(point)); } }”)I tried this code with rails 2.3.8,so I am not sure with rails 3 version
For right click I need to check..
Thanks
Brijesh Shah
Hi Brijesh
Thanks for your reply. I am using rails 3 now. these code work properly.I need to show pop-up in right click on map. By Using ym4r_gm plugin, i know polygon and polyline is here. But i donno how to draw a circle based on radius. Do you have any idea about this. please help me.
Thanks,
NanaPriya.
Hi,
Any possibilities available for displaying marker with label using this plugin. I need to show labeled marker. Can you help me?
Thanks,
Priya.
Hi Priya,
You can use add_overlay method to put label on marker..
sample given on http://blog.brijeshshah.com/google-maps-in-ruby-on-rails/ blog.
Thanks
Brijesh Shah
I suggest you have a look at gmaps4rails:
https://github.com/apneadiving/Google-Maps-for-Rails
Hi,
Thanks for all replies. I will try these both.
Thanks
Priya
Hi,
In my another project. Google map does not display. I am using ym4r_gm plugin. I am also using JQuery in menu and somewhere. I think it is deprecated with jquery. Is it correct? how can i rectify it?
Thanks,
Priya
Hi
Did you get any js error in that?
Thanks
Brijesh Shah
Hi Brijesh,
Thanks for ur quick reply. Actually the map is not loaded when i click on my menu tab. It is a javascript tab. when i click the tab, it loads the html. like
$(‘#contentHolder’).html(v[1]);
The v[1] has the following map code:
v\:* { behavior:url(#default#VML);}
var youarehere_icon = addOptionsToIcon(new GIcon(),{image : “../images/marker_up.png”,iconAnchor : new GPoint(16,32),infoWindowAnchor : new GPoint(16,0)});
var youarehere_icon = addOptionsToIcon(new GIcon(),{image : “../images/marker_up.png”,iconAnchor : new GPoint(16,32),infoWindowAnchor : new GPoint(16,0)});
var youarehere_icon = addOptionsToIcon(new GIcon(),{image : “../images/marker_up.png”,iconAnchor : new GPoint(16,32),infoWindowAnchor : new GPoint(16,0)});
var youarehere_icon = addOptionsToIcon(new GIcon(),{image : “../images/marker_up.png”,iconAnchor : new GPoint(16,32),infoWindowAnchor : new GPoint(16,0)});var map;
window.onload = addCodeToFunction(window.onload,function() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(“locations_map”));
map.setCenter(new GLatLng(13.0145469,77.5846673),13);
map.setCenter(new GLatLng(12.9715987,77.5945627),13);
map.setCenter(new GLatLng(12.9715987,77.5945627),13);
map.setCenter(new GLatLng(12.9274529,77.590597),13);var youarehere = new GMarker(new GLatLng(13.0145469,77.5846673),{title : “Shivajinagar”,icon : youarehere_icon,draggable : true});
map.addOverlay(youarehere);
var youarehere = new GMarker(new GLatLng(12.9715987,77.5945627),{title : “K R Market”,icon : youarehere_icon,draggable : true});
map.addOverlay(youarehere);
var youarehere = new GMarker(new GLatLng(12.9715987,77.5945627),{title : “K R Market”,icon : youarehere_icon,draggable : true});
map.addOverlay(youarehere);
var youarehere = new GMarker(new GLatLng(12.9274529,77.590597),{title : “Jayanagar 9th Block”,icon : youarehere_icon,draggable : true});
map.addOverlay(youarehere);map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
});
.
otherwise map loaded correctly.
Thanks,
Priya
Hi Brijesh,
Still i am having problem on labeled marker. I tried many times. but didn’t find any solution. i also tried with labeledmarker.js. but labeled marker doesnot come.
Thanks,
Priya
Hi,
This is my code for labeled marker.
@map.event_init(@map, :singlerightclick, “function(point, src, marker){
var latlng = new GLatLng(12.8956, 80.2293);
var icon = new GIcon();
icon.image = ‘../images/marker.png’;
icon.iconSize = new GSize(45, 45);
icon.iconAnchor = new GPoint(16, 16);
icon.infoWindowAnchor = new GPoint(25, 7);
opts = {
‘icon’: icon,
‘clickable’: true,
‘labelText’: ‘A’,
‘labelOffset’: new GSize(-6, -10)
};
map.addOverlay(new LabeledMarker(latlng, opts));
}”)
function LabeledMarker(latlng, options){
this.latlng = latlng;
this.labelText = options.labelText || “”;
this.labelClass = options.labelClass || “markerLabel”;
this.labelOffset = options.labelOffset || new GSize(0, 0);
this.clickable = options.clickable || true;
if (options.draggable) {
// This version of LabeledMarker doesn’t support dragging.
options.draggable = false;
}
GMarker.apply(this, arguments);
}
the labeledMarker function called. all the lines executed in this function. But after this line “map.addOverlay(new LabeledMarker(latlng, opts));” does not executed. Any suggestions?
Thanks,
Priya
Hi
Did you check in firebug for any js error?
I think there should be arguments variable error because of it is defined before.
Thanks
Brijesh Shah
Hi Brigesh,
But All alerts are coming before this line “map.addOverlay(new LabeledMarker(latlng, opts));”.
Hi Brijesh,
I am leaving the ym4r-gm plugin for map control. Now i am using javascript for that. Labeled marker works fine in that.
Thanks,
Priya.
Hi Brijesh
I’m trying to install ym4r-gm plugin but I keep getting the following error :
‘: uninitialized constant Ym4r::GmPlugin::ApiKey::RAILS_ROOT (NameError)
Any ideas?
thanks
eoin
I’m also getting that error message “vendor/plugins/ym4r_gm/lib/gm_plugin/key.rb:12:in `’: uninitialized constant Ym4r::GmPlugin::ApiKey::RAILS_ROOT (NameError)”
RAILS_ROOT is now Rails.root. See http://quaran.to/blog/2010/02/03/the-rails-module/
My fix for key.rb is below. You can’t just search/replace RAILS_ROOT (or RAILS_ENV) because it’s a Pathname now. Try these in the console:
Rails.root + ‘/config/file.yml’
“#{Rails.root}/config/file.yml”
Rails.root.join(‘config’,'file.yml’)
–
diff –git a/vendor/plugins/ym4r_gm/lib/gm_plugin/key.rb b/vendor/plugins/ym4r_gm/lib/gm_plugin/key.rb
index e4de97b..50aff28 100644
— a/vendor/plugins/ym4r_gm/lib/gm_plugin/key.rb
+++ b/vendor/plugins/ym4r_gm/lib/gm_plugin/key.rb
@@ -9,11 +9,11 @@ module Ym4r
#Class fo the manipulation of the API key
class ApiKey
#Read the API key config for the current ENV
- unless File.exist?(RAILS_ROOT + ‘/config/gmaps_api_key.yml’)
- raise GMapsAPIKeyConfigFileNotFoundException.new(“File RAILS_ROOT/config/gmaps_api_key.yml not found”)
+ unless File.exist?(“#{Rails.root}/config/gmaps_api_key.yml”)
+ raise GMapsAPIKeyConfigFileNotFoundException.new(“File Rails.root/config/gmaps_api_key.yml not found”)
else
- env = ENV['RAILS_ENV'] || RAILS_ENV
- GMAPS_API_KEY = YAML.load_file(RAILS_ROOT + ‘/config/gmaps_api_key.yml’)[env]
+ env = ENV['RAILS_ENV'] || Rails.env
+ GMAPS_API_KEY = YAML.load_file(“#{Rails.root}/config/gmaps_api_key.yml”)[env]
end
def self.get(options = {})