0

私は現在、Play を使用して Web アプリを開発しようとしているため、これまでのところ非常にうまく機能する Google マップを統合したいと考えています。

このアプリでは、ユーザーは住所を入力してマーカーを追加できる必要があります。この住所は、LatLng 値を取得するためにコーディングする必要があり、ユーザーがマーカーを削除しない限り、マーカーはマップ上に表示される必要があります。

私のコードは次のようになります。

ご覧のとおり、最初にサンプル マーカーを 1 つ追加しました。新しいものを追加すると、非常にうまく機能します。しかし、ページ全体を更新すると、Google マップが再び再読み込みされ、サンプル マーカーのみが表示され、新しいマーカーは表示されません。

私の質問:

1) 新しいマーカーが利用可能になったときに、Google マップに新しいマーカーを記憶させることはできますか?

2) LatLng 値を Play モデルに String 属性として保存する可能性はありますか? これは、マップをリロードし、すべてのマーカーを再表示しながら、DB からすべての位置をリロードするのに役立ちます。しかし、次のように play ステートメント内で codeAdress() 関数を実行することは不可能のようです: @{Place.store(codeAddress())}。これはうまくいきません。

Main.html (すべての html ページのテンプレート)

<head>
....
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=-mykey-&sensor=false">

</script>
<script src="@{'/public/javascripts/maps.js'}" type="text/javascript"
    charset="${_response_encoding}"></script>
</head>

Maps.js:

function initialize() {

    var latlngCenter = new google.maps.LatLng(12.345, 12.345);
    var latlngExample = new google.maps.LatLng(12.345, 12.345);

    var mapOptions = {
        center : latlngCenter,
        zoom : 12,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    var contentString = 'text';

    var infowindow = new google.maps.InfoWindow({
        content : contentString
    });

    var pinColor = "72EC0E";
    var pinImage = new google.maps.MarkerImage(
            "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|"
                    + pinColor, new google.maps.Size(21, 34),
            new google.maps.Point(0, 0), new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage(
            "http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37), new google.maps.Point(0, 0),
            new google.maps.Point(12, 35));

    var markerExample = new google.maps.Marker({
        position : latlngExample,
        map : map,
        icon : pinImage,
        shadow : pinShadow,
        title : 'Title'
    });

    google.maps.event.addListener(markerExample, 'click', function() {
        infowindow.open(map, markerExample);
    });

    geocoder = new google.maps.Geocoder();

}

function codeAddress(query) {
    var address = query;
    geocoder.geocode({
        'address' : address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map : map,
                position : results[0].geometry.location
            });
            alert("Alert1");
        } else {
            alert("No result");
        }
    });
    return results[0].geometry.location;
}

index.html (メインから拡張)

#{field 'parking.street'} <label for="street">street</label> <input
            type="text" class="form-control" name="${field.name}" id="address"
            maxlength="50" placeholder="street"> #{/field}
        <button type="button" class="btn btn-success" onclick="codeAddress()">add</button>
        <div id="map_canvas" style="width: 800px; height: 600px;"></div>
4

1 に答える 1