How to put Google Maps into Ruby on Rails

Introduction
Last week A month ago Gerard Lolkema had a lot of trouble getting Google Maps working in Ruby on rails so he asked me for help.

Gerard Lolkema already found a tutorial to do this. The tutorial: Rails, Geocoding, and Google Maps from Andre on Tech. This tutorial provides you of a lot of code that is direct usable but because we make a dutch website we need to display addresses from The Netherlands. This functionality is not in the code (and probably not in the plugin) of Andre on Tech. He is using a web service from an other website to get the longitude and latitude from an address, but the problem is that it is only possible to send US addresses. To find that problem took us half a day.

Finally we found an alternative to put Google Maps in our website. And this is how we did it.

Put Google Maps in your webpage
First you need a Google Maps API Key

After you have your API key you need to load it like in every case you use Google Maps

<script  src="http://maps.google.com/maps?file=api&v=2&key=[[put here your own api key]]" type="text/javascript"></script>

after that we make a div and in that div we make a function that loads the Map from Google Maps.

<div id="map" style="width: 500px; height: 400px">
	<script type="text/javascript">
		load();
	</script>

</div>

The function load() will be executed when the div is loaded in html. So that means when the page is loaded the load() function will start.

The load() function looks like this:

<script type="text/javascript">

	var geocoder;
	var map; 

	//The address that you want to show in Google Maps
	var address = "Tesselschadestraat 12, Leeuwarden, Netherlands";

	function load(){

		// Create new google map object
		map = new GMap2(document.getElementById("map"));

		//Adds the zoom function on the map
		map.addControl(new GSmallMapControl());

		// Create new geocoding object
		geocoder = new GClientGeocoder();

		// Gets the information from geocode and send it to addAddressToMap
		geocoder.getLocations(address, addAddressToMap);
	}
</script>

And now we go to the addAddressToMap function again between a <script></script>. You can also put it in the same script tag as the load() function:

<script type="text/javascript">

	function addAddressToMap(response){

		// Retrieve the object
		place = response.Placemark[0];

		// Retrieve the latitude and longitude. Important to get everything in one map
		point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);

		// Center the map on this point
		map.setCenter(point, 15);

		// Create a marker
		marker = new GMarker(point);

		// Add the marker to map
		map.addOverlay(marker);

		// Add address information to marker
		marker.openInfoWindowHtml(place.address);
	}</script>

Of course this is not really a dynamic way but this is easy to rebuild to a more dynamic script

Conclusion
If you now test the script you see the script is working and even in a easier way than other scripts. But the script is not really finished because if now use a fake address you see an empty Google Maps window but it is a start. Please leave a comment this was helpful

Still 1 problem
There is still one problem with this script. If the address is invalid you get a gray empty Google Maps screen. I already solved this but I did it the dirty way. I made a javascript that makes the height and width of the Google Maps <div> 0 px if he has no result. But there must be another, cleaner way. If someone knows it please leave it in the comments.