Monday, June 18, 2012

How to use gmaps.js on web2py

It's easy to handle Google Maps on your website and of course it will be much easier if you use web2py!

1. Create new app called gmap

2. Download gmaps.js
Go to and download gmaps.js. Place it under the app folder static/js/gmaps.js

3. controllers/
Replace the def index() with the following.

def index():
    from import geocode
    latitude = longtitude = ''
    form=SQLFORM.factory(Field('search'), _class='form-search')['_class'] = 'input-long search-query'
    form.custom.submit['_value'] = 'Search'
    form.custom.submit['_class'] = 'btn'
    if form.accepts(request):
        (latitude, longitude) = geocode(address)
        (latitude, longitude) = ('','')
    return dict(form=form, latitude=latitude, longitude=longitude)
Note:  There was an issue #855 and just fixed with the Version 2.0.0 (2012-06-17 23:36:32) dev. If you are using the web2py version older than this, make sure to replace the latitude and longitude as follows.
 (longitude, latitude) = geocode(address)
4. views/default/index.html
Replace it with the following.

{{extend 'layout.html'}}
<script src=""></script>
<script src="{{=URL('static','js/gmaps.js')}}"></script>
{{if longitude or latitude:}}
<p>latitude, longtitude: {{=latitude}},{{=longitude}}</p>
<div id="map" style="height:400px;width:800px"></div>
  map = new GMaps({
    div: '#map',
    lat: {{=latitude}},
    lng: {{=longitude}}
    lat: {{=latitude}},
    lng: {{=longitude}},
    title: 'Here!',
    infoWindow: {
        content: '<p>{{}}</p>'
5. Result
Type "243 S Wabash Ave, Chicago, IL, USA" and see the result.


  1. Great Post.
    I am new to Web2py and this helped a lot.
    How would i make it display and map with the users current location (obtained from browser) on load?

    1. I never tried but this post might help you.

  2. Great work, just tried it does return the correct (latitude, longtitude: 41.8784403,-87.6256217) But the map is not displayed.
    Thanks in advance

    1. if your server uses https trey :