s.nagesh
Joined: 23 Jul 2007
Posts: 131
|
 Posted: Tue Oct 30, 2007 10:11 am Post subject: Integrating Googlemaps On rails application |
 |
|
Integrating Googlemaps:
------------------------------
In ROR we can easily integrate Googlemaps.
the following example demonstrate, how to integrate googlemaps in your rails application.
Open Command prompt and run :
-------------------------------------------
step1)
C:\>rails googlemap
C:\>cd googlemap
Then open C:\googlemap\app\helpers\application_helper.rb and include the follwing code.
def map(options = {})
gmap_defaults = {:width => "525", :height => "500",
:center => "-122.18172311782837, 37.453261881659074",
:zoom => "2",
:key => MY_CONFIG[:google_key]
}
@gmap = gmap_defaults.merge(options)
@gmap[:marker] = @gmap[:center] if @gmap[:marker].nil?
# Convert from single marker syntax to multiple markers syntax
marker_hash = {}
marker_hash[:point] = @gmap[:marker] if @gmap[:marker]
marker_hash[:text] = @gmap[:text] if @gmap[:text]
marker_hash[:url] = @gmap[:url] if @gmap[:url]
markers = {:markers => [marker_hash]}
@gmap = markers.merge(@gmap)
render(:partial => "layouts/google_map", :no_layout => true)
end
step2)
Then create C:\googlemap\app\views\layouts\_google_map.rhtml and put the follwing code
<% @body_tag = 'onload="initMap()"' %>
<div id="map" style="width: <%= @gmap[:width] %>px; height: <%= @gmap[:height] %>px"></div>
<% if @gmap[:locator] %>
<hr>
<div id="message"></div>
<% end %>
<script src="http://maps.google.com/maps?file=api&v=1&key=<%= @gmap[:key] %>" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function initMap() {
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Center the map
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(<%= @gmap[:center] %>), <%= @gmap[:zoom] %>);
// Creates a marker whose info window displays the given number
function createMarker(point, icon_image, text, url) {
var icon = new GIcon(baseIcon);
if (icon_image && icon_image.length > 0) {
icon.image = icon_image;
} else {
icon.image = "http://www.google.com/mapfiles/marker.png";
}
var marker = new GMarker(point,icon);
// Show this marker's index in the info window when it is clicked
if (text.length > 0) {
if (url.length > 0) {
var html = "<a href='" + url + "'>" + text + "</a>";
} else {
var html = text;
}
html = '<div style="white-space:nowrap;">' + html + '</div>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}
return marker;
}
GEvent.addListener(map, "click", function(overlay, point) {
var latLngStr = 'new GPoint(' + point.x + ', ' + point.y + ');';
document.getElementById("message").innerHTML = latLngStr;
});
<%-
n = 1
for marker in @gmap[:markers]
icon_image = image_path("marker#{n}")
n += 1
-%>
var point = new GPoint(<%=marker[:point]%>);
var marker = createMarker(point, "<%= icon_image %>", "<%= marker[:text] %>", "<%= marker[:url] %>");
map.addOverlay(marker);
<%-
end
-%>
}
//]]>
</script>
step 3)
Then Create C:\goolemap\app\layouts\main.rhtml with the following
<html>
<head>
<title>RoR Demos</title>
</head>
<% if @body_tag %>
<body <%= @body_tag %>>
<% else %>
<body>
<% end %>
<%= @content_for_layout %>
</body>
</html>
step 4)
Next add this to your environment.rb file config/environment.rb. Use your own Google Maps API Key in place of the one below:
For generating your own googlemap key:
http://www.google.com/apis/maps
with help of this website we can generate your own googlemap key for your domin. that generated key will be kept in yor environment.rb file.
like this
MY_CONFIG = {
:google_key => "place your googlemap key"
}
step 5)
the next step is to generate your controller like
c:\googlemap>ruby script\generate controller map
exists app/controllers
exists app/helpers
create app/views/map
exists test/functional
create app/controllers/map_controller.rb
create test/functional/map_controller_test.rb
create app/helpers/map_helper.rb
Edit the app\controllers\map_controller.rb file
and include the following code:
class MapController < ApplicationController
layout 'main'
def show
end
end
step 6)
Finally
Create show.rhtml /* Where you require google map */
Finally, create app\views\map\show.rhtml:
<h1>THIS is your Googlemap</h1>
<%= map :center => "-122.18172311782837, 37.453261881659074" %>
Hosts
We can also give height and width for googlemap like this
<%= map :width => "500", :height => "400",
:center => "-122.024846, 37.306761",
:markers => [
{:point => "-122.02517867088318, 37.306505188827586",
:text => "Meyerholz Field 1"},
{:point => "-122.0241916179657, 37.30522511298032",
:text => "Meyerholz Field 2"}] %>
Thats it
run the server by using
C:\Googlemap> ruby script\server
and run http://localhost:3000/map/show in your localserver.
The best example for this is
http://templatesbasket.com/demo/map/show
here you can find the googlemap output.
thanks and regards
nagesh |
|
