1. Create new app called gmap
2. Download gmaps.js
Go to http://hpneo.github.com/gmaps/ and download gmaps.js. Place it under the app folder static/js/gmaps.js
3. controllers/default.py
Replace the def index() with the following.
def index():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.
from gluon.tools import geocode
latitude = longtitude = ''
form=SQLFORM.factory(Field('search'), _class='form-search')
form.custom.widget.search['_class'] = 'input-long search-query'
form.custom.submit['_value'] = 'Search'
form.custom.submit['_class'] = 'btn'
if form.accepts(request):
address=form.vars.search
(latitude, longitude) = geocode(address)
else:
(latitude, longitude) = ('','')
return dict(form=form, latitude=latitude, longitude=longitude)
(longitude, latitude) = geocode(address)4. views/default/index.html
Replace it with the following.
{{extend 'layout.html'}}
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="{{=URL('static','js/gmaps.js')}}"></script>
<div>
{{=form.custom.begin}}
{{=form.custom.widget.search}}{{=form.custom.submit}}
{{=form.custom.end}}
</div>
{{if longitude or latitude:}}
<p>latitude, longtitude: {{=latitude}},{{=longitude}}</p>
<div id="map" style="height:400px;width:800px"></div>
<script>
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: {{=latitude}},
lng: {{=longitude}}
});
map.addMarker({
lat: {{=latitude}},
lng: {{=longitude}},
title: 'Here!',
infoWindow: {
content: '<p>{{=request.vars.search}}</p>'
}
});
});
</script>
{{pass}}
5. Result
Type "243 S Wabash Ave, Chicago, IL, USA" and see the result.
