Django Google Maps API v3 and Static Maps API helper appのサンプルを試してみました。

さくらVPSのDjango1.3にdjango-gmapi（Django Google Maps API v3 and Static Maps API helper app）のインストールをして、サンプルアプリの動作を確認しました。

Django Google Maps API v3 and Static Maps API helper app
http://django-gmapi.googlecode.com/

django-gmapi-1.0.1　のダウンロードとインストール。
sample_project　のダウンロードとDjangoのプロジェクトフォルダへの設置をします。

サンプルプロジェクトの「gmapitest」でdjangoを起動します。
下記のエラーが表示されます。

SyntaxError at /

invalid syntax (maps.py, line 129)

Request Method:  GET
Request URL:  http://hogehost:8000/
Django Version:  1.3
Exception Type:  SyntaxError
Exception Value:  

invalid syntax (maps.py, line 129)

Exception Location:  /path/to/django/gmapitest/myapp/views.py in ?, line 3

調べてみると、現在のPython 2.4.3では動かないようです。
Python 2.6.7を別にインストールします。

別にインストールをしたPython 2.6.7で再度djangoをインストールします。
インストールの確認をします。

$ python2.6.7
Python 2.6.7 (r267:88850, Oct  8 2011, 17:43:16)
[GCC 4.1.2 20080704 (Red Hat 4.1.2-48)] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import django
>>> django.VERSION
(1, 3, 0, 'final', 0)

django-gmapi-1.0.1　をPython 2.6.7でインストールした後
再度、サンプルプロジェクトの「gmapitest」で、Python 2.6.7を使ってdjangoを起動します。
Google mapの表示を確認できました。

地図表示のポイントとなるのは、/path/to/django/gmapitest/myapp/views.py　になります。この中のindexの内容を基に修正、機能を作っていけばよさそうです。

# -*- coding: utf-8 -*-
from django import forms
from django.shortcuts import render_to_response
from gmapi import maps
from gmapi.forms.widgets import GoogleMap


class MapForm(forms.Form):
    map = forms.Field(widget=GoogleMap(attrs={'width':900, 'height':600}))


def index(request):
    gmap = maps.Map(opts = {
        'center': maps.LatLng(34.687428,133.916473),
        'mapTypeId': maps.MapTypeId.ROADMAP,
        'zoom': 13,
        'mapTypeControlOptions': {
             'style': maps.MapTypeControlStyle.DROPDOWN_MENU
        },
    })
    marker = maps.Marker(opts = {
        'map': gmap,
        'position': maps.LatLng(34.687428,133.916473),
    })
    maps.event.addListener(marker, 'mouseover', 'myobj.markerOver')
    maps.event.addListener(marker, 'mouseout', 'myobj.markerOut')
    info = maps.InfoWindow({
        'content': 'Hello!　岡山の地図',
        'disableAutoPan': True
    })
    info.open(gmap, marker)
    context = {'form': MapForm(initial={'map': gmap})}
    return render_to_response('index.html', context)