template.latte

{**
 * Default GMapFormControl template
 *
 * @param Nette\Web\Html    $latitude   latitude input
 * @param Nette\Web\Html    $longitude  longitude input
 * @param string            $control_id unique identifier of current control
 * @param array             $marker     central point of map
 * @param array|FALSE       $center     current marker, may be empty
 * @param array             $options    map options
 *}
{block #map}
<div id="{$control_id}-container" class="GMapFormControl">
    <label for="{$latitude->id}">Latitude:</label>
    {$latitude}
    <br />
    <label for="{$longitude->id}">Longitude:</label>
    {$longitude}
</div>
{/block}
{block #script}
<script type="text/javascript">
    $(function() {
        var $map_center = new google.maps.LatLng({$center['latitude']}, {$center['longitude']});
        var $marker = {if $marker}new google.maps.LatLng({$marker['latitude']}, {$marker['longitude']}){else}false{/if};
        var $container = $('#'+{$control_id}+'-container').css("width", "{$options['width']}").css("height", "{$options['height']}");
        var $form = $container.closest("form");
        var $lat = $("#"+{$latitude->id}).hide();
        var $long = $("#"+{$longitude->id}).hide();
        
        $container.find("label").hide();
        $form.append($lat);
        $form.append($long);
        
        var options = {
          zoom: {$options['zoom']},
          center: $map_center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById({$control_id}+'-container'), options);
        
        var $current_marker = new google.maps.Marker({
                position: $map_center,
                map: null,
                draggable: true
            });
        
        if($marker) {
            $current_marker.setPosition($marker);
            $current_marker.setMap(map);

            // bind form filling when marker is dragged
            google.maps.event.addListener($current_marker, 'dragend', function(event) {
                $lat.val(event.latLng.lat());
                $long.val(event.latLng.lng());
            });
        }
        
        google.maps.event.addListener(map, 'click', function(event) {
            // reposition current marker when user clicks on map
            $current_marker.setPosition(event.latLng);
            $current_marker.setMap(map);
        
            // ... and fill latitude and longitude
            $lat.val(event.latLng.lat());
            $long.val(event.latLng.lng());
        });
    })
</script>
{/block}