Wednesday, May 28, 2014

Google Maps Example Using Geolocation

Here is a really simple script for using Geolocation with the new Google Maps API V3. The code is pretty self explanatory:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&v=3&sensor=true"></script> 

<script type="text/javascript">
    // Note: This example requires that you consent to location sharing when
    // prompted by your browser. If you see a blank space instead of the map, this
    // is probably because you have denied permission for location sharing.

    var map;
    var infowindow;
    var service;

    function initialize() {

        var mapOptions = {
            zoom: 13
        };

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

        // Try HTML5 geolocation
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = new google.maps.LatLng(position.coords.latitude,
                        position.coords.longitude);

                var marker = new google.maps.Marker({
                    map: map,
                    position: pos,
                    title: "You are here!",
                    icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'

                });

                var request = {
                    location: pos,
                    radius: 10000,
                    query: 'Veterinarian' // The query for what to find near your location
                };

                map.setCenter(pos);

                doSearch(request);
            }, function() {
                handleNoGeolocation(true);
            });
        } else {
            // Browser doesn't support Geolocation
            handleNoGeolocation(false);
        }
    }

    function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
        } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
            map: map,
            position: new google.maps.LatLng(60, 105),
            content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
    }

    function doSearch(request) {
        infowindow = new google.maps.InfoWindow();

        service = new google.maps.places.PlacesService(map);
        service.textSearch(request, callback);
    }

    function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });

        var request = {reference: place.reference};
        service.getDetails(request, function(details, status) {
            google.maps.event.addListener(marker, 'click', function() {
                if (details != null) 
                    infowindow.setContent('<a target="_blank" href="' + details.url + '">' + details.name + "</a><br />" + details.formatted_address + "<br />" + details.formatted_phone_number);
                else
                    infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>