1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{asset('css/jquery.ui.all.css')}}">
<link rel="stylesheet" href="{{asset('css/demo.css')}}">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{asset('js/jquery.ui.addresspicker.js')}}"></script>
<script>
$(function() {
var addresspicker = $( "#addresspicker" ).addresspicker({
componentsFilter: 'country:FR'
});
var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
regionBias: "fr",
language: "fr",
updateCallback: showCallback,
mapOptions: {
zoom: 7,
center: new google.maps.LatLng(7.43, -1.03),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
elements: {
map: "#map",
lat: "#mpk_cmsbundle_company_lat",
lng: "#mpk_cmsbundle_company_lng",
street_number: '#street_number',
route: '#route',
locality: '#locality',
sublocality: '#sublocality',
administrative_area_level_3: '#administrative_area_level_3',
administrative_area_level_2: '#administrative_area_level_2',
administrative_area_level_1: '#administrative_area_level_1',
country: '#country',
postal_code: '#postal_code',
type: '#type'
}
});
var gmarker = addresspickerMap.addresspicker( "marker");
gmarker.setVisible(true);
addresspickerMap.addresspicker( "updatePosition");
$('#reverseGeocode').change(function(){
$("#addresspicker_map").addresspicker("option", "reverseGeocode", ($(this).val() === 'true'));
});
function showCallback(geocodeResult, parsedGeocodeResult){
$('#callback_result').text(JSON.stringify(parsedGeocodeResult, null, 4));
}
// Update zoom field
var map = $("#addresspicker_map").addresspicker("map");
google.maps.event.addListener(map, 'idle', function(){
$('#zoom').val(map.getZoom());
});
});
</script>
</head>
<body>
<form action="#" method="post" {{form_enctype(form)}}>
<div class="demo">
<div class='clearfix'>
<div class='input input-positioned'>
<label>Address : </label> <input id="addresspicker_map" disabled="disabled" name="something" placeholder="ex: ...Osu, Mamprobi, Bortianor... "/> <br/>
<label>Locality: </label> <input id="locality" disabled=disabled> <br/>
<label>SubLocality: </label> <input id="sublocality" disabled=disabled> <br/>
<label>Borough: </label> <input id="administrative_area_level_3" disabled=disabled> <br/>
<label>District: </label> <input id="administrative_area_level_2" disabled=disabled> <br/>
<label>State/Province: </label> <input id="administrative_area_level_1" disabled=disabled> <br/>
<label>Country: </label> <input id="country" disabled=disabled> <br/>
<label>Postal Code: </label> <input id="postal_code" disabled=disabled> <br/>
<label>Lat: </label> {{form_widget(form.lat, {attr: {'disabled':'disabled'}})}} <br/>
<label>Lng: </label> {{form_widget(form.lng, {attr: {'disabled':'disabled'}})}} <br/>
<!--<label>Lng: </label> <input id="lng" disabled=disabled> <br/>-->
<label>Zoom: </label> <input id="zoom" disabled=disabled> <br/>
<label>Type: </label> <input id="type" disabled=disabled /> <br/>
</div>
<div id="map"></div>
<!--<div id="legend">You can drag and drop the marker to the correct location</div>-->
</div>
</div>
<div class='input-positioned'><label>Company Name: </label>{{form_widget(form.name)}}</div>
<div class='input-positioned'><label>Services: </label>{{form_widget(form.services)}}</div>
<div class='input-positioned'><label>logo: </label><input type="file"/></div>
<div class='input-positioned'>
<label>Description: </label>
{{form_widget(form.description, {'attr':{'rows':15}})}}
</div>
<input type="submit"/>
</form>
</div><!-- End demo -->
</body>
</html> |