Category Archives: Javascript

Autocomplétion api google maps

Posté par le 29 juillet 2011 No comments

Dans cet article, nous allons voir comment mettre en place fenêtre modale  avec Jquery-ui avec une autocomplétion grâce à l’api de google maps. Le rendu voulu est une case à cocher “visible sur la map”, le fait de cocher la case ouvre une fenêtre modale avec la map ainsi que le champs d’autocomplétion.

Prérequis

- Jquery

- Jquery-ui

- Api Google Maps

PHP
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
<html>
    <head>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
        
        <link rel="stylesheet" media="screen" type="text/css" href="../jquery-ui/css/ui-lightness/jquery-ui-1.8.14.custom.css" />
        <script type="text/javascript">
        $(document).ready(function(){
            
            $('#map').click(function() {
                
                var geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(48.86607,2.353706);
                var options = { zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
                var marker;
                var map;
                var item;
                
                if($('#map').attr('checked')) {
                    $('#dialogMap').dialog({
                        width: 850,
                        height: 580,
                        modal: true,
                        open: function(event, ui) {
                            map = new google.maps.Map(document.getElementById("map_canvas"), options);
                            marker = new google.maps.Marker({ map: map, draggable: false });
                        },
                        buttons: {
                            'Valider': function() {
                                $('#dialogMap').dialog('destroy');
                            },
                            'Annuler': function() {
                                if($('#map').is(':checked')) {
                                    $('#map').attr('checked', false);
                                    $.uniform.update('#map');
                                }
                                $('#dialogMap').dialog('destroy');
                            }
                        },
                        close: function() {
                            if($('#map').is(':checked')) {
                                $('#map').attr('checked', false);
                                $.uniform.update('#map');
                            }
                            $('#dialogMap').dialog('destroy');
                        }
                    });
                }
                $(function() {
                    $('#geolocation').autocomplete({
                        source: function(request, response) {
                            geocoder.geocode({'address': request.term}, function(results, status) {
                                response($.map(results, function(item) {
                                    return {
                                        label: item.formatted_address,
                                        value: item.formatted_address,
                                        latitude: item.geometry.location.lat(),
                                        longitude: item.geometry.location.lng()
                                    }
                                }));
                            });
                        },
                        select: function(event, ui) {
                            item = ui.item;
                            var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
                            marker.setPosition(location);
                            map.setCenter(location);
                        }
                    });
                });
            });
        });
        </script>
    </head>
    
    <body>
        <form>
        <label for="map">Visible sur la carte</label>
        <input type="checkbox" name="map" id="map" />
        </form>
        <div id="dialogMap" title="Localisation" style="display:none;">
            <form>
                <label for="geolocation">Adresse: </label>
                <input type="text" name="geolocation" id="geolocation" size="33" />
            </form>
            <div id="map_canvas" style="width:850px;height:580px;"></div>
        </div>    
    </body>
</html>

Et voila, relativement simple et efficace :) .

Voir le resultat