Use google map in rails without using gem

Google Maps (formerly Google Local) is a web mapping service application and technology provided by Google, that powers many map-based services. We can use Google Maps in rails application using different gems like “geocoder gem“, “gmaps4rails gem” etc. But in some case it gives problem. I tried many times to use “geocoder gem” with mongoid in my rails application. But in this case I faced many problem. No solution found for these problem. So I tried to use Google Maps without using any gem. Finally I become success to use Google maps.

Before start this tutorial make sure that the ‘mongoid’ gem is already installed in your application. Lets follow following steps:

  1. Create Scaffold (say Maps)
    rails g scafflod Maps address:string lng:float lat:float
  2. Add one div with class ‘mapCanvas‘ in your new view.
    <div class="mapCanvas" style="width: 500px; height: 400px"></div>

    The google map will appear in this div.

  3. Add following lines of code in application.js file.
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.88, -122.442626), 10);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        GEvent.addListener(map,"click", function(overlay,latlng) {
          if (overlay) {
            // ignore if we click on the info window
            return;
          }
          var tileCoordinate = new GPoint();
          var tilePoint = new GPoint();
          var currentProjection = G_NORMAL_MAP.getProjection();
          tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom());
          latDiv = document.getElementById('map_lat');
          lngDiv = document.getElementById('map_lng');
          lngDiv.value = latLng.lat();
          latDiv.value = latLng.lng();
          tileCoordinate.x = Math.floor(tilePoint.x / 256);
          tileCoordinate.y = Math.floor(tilePoint.y / 256);
          var myHtml = "Latitude: " + latlng.lat() + "&lt;br/&gt;Longitude: " + latlng.lng() +
            "&lt;br/&gt;The Tile Coordinate is:&lt;br/&gt; x: " + tileCoordinate.x +
            "&lt;br/&gt; y: " + tileCoordinate.y + "&lt;br/&gt; at zoom level " + map.getZoom();
          map.openInfoWindow(latlng, myHtml);
        });
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  4. Add following lines of code on the “head” section of your default layout
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;
    key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw"
     type="text/javascript"></script>
  5. Then following type of google map appear while running application.

    And the value of latitude and longitude appear as the value of text field on the form which values can be save in database with normal queries.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s