Jan 3, 2013

Google Map Instant Search

Google Map Instant Search with simple JQuery and j-son script, by using Google's API and by using instant search function keyup(function(e))

Instant search shows results as you type. It is a faster way to search as your results nearly always appear before you have finished typing.

As you type into a search bar it starts recommending locations based on what you are typing and centre on the map on that location. The recommended locations appear beside the search box. The map will nearly always centre on your desired location before you have actually typed in the entire name of the location.
<!DOCTYPE html created my Sandeep Mittal>
<html>
<head>
    <title>Google Instant Map Search</title>
    <link type="text/css" href="http://cdn.qtimg.com/css/jquery-ui-1.8.4.custom_toolbar.css" rel="stylesheet" />
</head>
<body>
    <div id="search" style="padding: 5px;">
        Google Instant Map Search :
        <input type="text" id="address" style="width: 500px;" />
    </div>
    <div id="map_canvas" style="height: 500px; width: 900px">
    </div>
    <script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAKAqAId-z4dpNB0txHVU_TRSdIo_h9adg_WTTpw2CoBgzP7rIUxRnKu-u9D1O2d2mEH6cCOw-B33tRQ"></script>
    <script type="text/javascript">
        google.load("jquery", "1.4.3");
        google.load("jqueryui", "1.8.5");
    </script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        var marker;
        $(document).ready(function () {
            initialize();
        });

        $('#address').keyup(function (e) {
            var $q = $(this);
            if (e.keyCode == '13')
                $("#address").autocomplete("close");
            if ($q.val() == '') {
                $("#address").autocomplete("close");
                return false;
            }
            codeAddress();
        });

        $(function () {
            $("#address").autocomplete({
                minLength: 1,
                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()
                            }
                        }));
                    })
                },

                //This bit is executed upon selection of an address
                select: function (event, ui) {
                    $("#latitude").val(ui.item.latitude);
                    $("#longitude").val(ui.item.longitude);
                    var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
                    marker.setPosition(location);
                    map.setCenter(location);
                },
                close: function () {
                }

            });

        });

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(37.7749295, -122.4194155);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            marker = new google.maps.Marker({
                map: map,
                draggable: true
            });
        }

        function codeAddress() {
            var address = document.getElementById("address").value;
            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
                    });
                }
            });
        }
    </script>
</body>

<b><i>About Me : Sandeep Mittal, My Blog : </i></b><a href="http://itdeveloperzone.blogspot.com">IT Developers Zone</a>

</html>

Google Map Instant Search Preview
Probabilmente come studente universitario ti troverai a scrivere una o più tesi per il tuo analogo esame di fine carriera. Ma di cosa si tratta in particolare? Scopriamo quali sono i pro dei tool per riscrivere testo che troverai online. Per strumento di parafrasi si intende un tool online che si occupa di parafrasare in maniera immediata frasi oppure interi paragrafi. Questa attività si svolgerà interamente su internet e non lascerà alcuna traccia di plagio