shoaibuddin/index.html

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Detect Location and Search POIs</title>

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    .result{
        float: right;
        margin-left: 0;
        margin-top: 35px;
    }
  </style>

</head>
<body>

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">NearMe</a>
            <form id="search" class="navbar-form form-search" action="#">
                <div class="input-append">
                    <input id="query" type="text" class="search-query" placeholder="Search POIs" >
                    <button type="submit" class="btn"><i class="icon-search"></i></button>

                </div>
            </form>
        </div>
    </div>
</div>

<div id="content">
<div id="padded-content">
<div id="location-details"></div>
<div id="map_canvas" style="width: 900px; height: 1000px; float:left;"></div>
<div class="result"></div>
</div>
</div>

<!-- /**
 *  This is file for the detecting GEO API, Firing Map view and Search Query for POIs.
 *
 *  @author Shoaib Ud-Din
 *  @version 201324
 *  @requires jQuery, Google Api, (Optional For UI) BootStrap CSS and JS
 */ -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyALOx2C2fT0p46-RLXmy5Wh5r1CaD_zGYU"></script>
<script type="text/javascript">
/**
 *  Wait for the Dom to be ready
 */
    $(document).ready(function(){
        /**
         *  Set the global variables
         */
        var loc;
        var map;
        var service;
        var infoWindow;
        var overlays = [];
        var resultList = [];
        var isMobile = $(window).width < 767;

        /**
         *  Detect User location with HTML GEO api
         */
        try {
            if (typeof navigator.geolocation !== 'undefined') {
                navigator.geolocation.getCurrentPosition (
                    function(position) {
                		var coords = position.coords;

                        console.log(coords);

                		/**
                         *  Store lat and long in loc variable
                         */
                        loc = new google.maps.LatLng(coords.latitude, coords.longitude);

                        /**
                         *  Set the map configs and requirements
                         */
                        map = new google.maps.Map(document.getElementById("map_canvas"), {
                		    mapTypeId: google.maps.MapTypeId.ROADMAP,
                		    mapTypeControl: false,
                		    center: loc,
                		    zoom: 13
                		});
                        console.log('loc-lat:',loc.mb, 'loc-long', loc.nb, 'map',map);

                		service = new google.maps.places.PlacesService(map);
            		    infoWindow = new google.maps.InfoWindow();
                        console.log(loc, map.mapUrl);
				    },
				    /**
                     *  Check for error if location is not enable or allowed and display message
                     */
                    function(error) {
		    			if (error.code == 1) {
		    			    $('#location-details').append('Please enable location tracking in your web browser');
		    			} else if (error.code == 2) {
		    				$('#location-details').append('Unable to determine location - please ensure location tracking is enabled in your browser');

	    				} else {
	    				    $('#location-details').append('Unable to determine location');
	    				}
	    			},
	    			{enableHighAccuracy: true}
	    		);
			} else {
			    $('#location-details').append('Your browser does not support location tracking');
			}
		} catch (e) {
		    alert('An error has occured');
		}
        console.log('done location detection')

		/**
         *  Plot the results to the map
         */
        function plotResultList(){
            var iterator = 0;
            for(var i = 0; i < resultList.length; i++){
                setTimeout(function(){
                    var lat = resultList[iterator].geometry.location.Za;
                    var lng = resultList[iterator].geometry.location.Ya;
                    var name = resultList[iterator].name;
                    var addr = resultList[iterator].formatted_address;
                    var reference = resultList[iterator].reference;


                    console.log('name, addr, reference: ', name, addr, reference);

                    /**
                     *  Spit results on page if you want to
                     */
                    $('.result').append('<p><div>'+name, addr)+'</div></p>';

			var marker = new google.maps.Marker({
                        position: resultList[iterator].geometry.location,
                        map: map,
                        title: name,
                        animation: isMobile? 'undefined' : google.maps.Animation.DROP
                    });
                    overlays.push(marker);

                    google.maps.event.addListener(marker, 'click', function() {
                        infoWindow.close();
                        var request = {
                            reference: reference
                        };

                        service.getDetails(request, function(place, status){
                            var content = "<h4>" + name + "</h4>";
                            if(status == google.maps.places.PlacesServiceStatus.OK){
                                if(typeof place.rating !== 'undefined'){
                                    var badgeType = '';
                                    if (place.rating < 2){
                                        badgeType = 'badge-important';
                                    } else if (place.rating >= 2 && place.rating <= 3){
                                        badgeType = 'badge-warning';
                                    } else {
                                        badgeType = 'badge-success';
                                    }
                                    content += "<p><small>Rating: <span class='badge " + badgeType + "'>" + place.rating + "</span></small></p>";
                                }

                                if(typeof place.formatted_address !== 'undefined'){
                                    content += "<br><small>" + place.formatted_address + "</small>";
                                }

                                if(typeof place.formatted_phone_number !== 'undefined'){
                                    content += "<br><small><a href='tel:" + place.formatted_phone_number + "'>" + place.formatted_phone_number + "</a></small>";
                                }

                                if(typeof place.website !== 'undefined'){
                                    content += "<br><small><a href='" + place.website + "'>website</a></small>";

                                }
                            }

                            infoWindow.setContent(content);
                            infoWindow.open(map, marker);
                        });
                    });
                    iterator++;
                }, isMobile? 0: (i * 75));
            }
		}

		/**
        *  On search submit get the POIs
        */
        $('#search').submit(function(e){
		    e.preventDefault();

            $('.result').empty();

            var query = $('#query').val();
            var request = {
                location: map.getCenter(),
                radius: '5000',
                query: query
            };

            service.textSearch(request, function(results, status, pagination){
                for(var i = 0; i < overlays.length; i++){
                    overlays[i].setMap(null);
                }
                resultList.length = 0;
                overlays.length = 0;
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    resultList = resultList.concat(results);
                    plotResultList();
                }
            });
		});
	});
</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Detect Location and Search POIs</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
	.result{
	float: right;
	margin-left: 0;
	margin-top: 35px;
	}
	</style>

	</head>
	<body>

	<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<a class="brand" href="#">NearMe</a>
	<form id="search" class="navbar-form form-search" action="#">
	<div class="input-append">
	<input id="query" type="text" class="search-query" placeholder="Search POIs" >
	<button type="submit" class="btn"><i class="icon-search"></i></button>

	</div>
	</form>
	</div>
	</div>
	</div>

	<div id="content">
	<div id="padded-content">
	<div id="location-details"></div>
	<div id="map_canvas" style="width: 900px; height: 1000px; float:left;"></div>
	<div class="result"></div>
	</div>
	</div>

	<!-- /**
	* This is file for the detecting GEO API, Firing Map view and Search Query for POIs.
	*
	* @author Shoaib Ud-Din
	* @version 201324
	* @requires jQuery, Google Api, (Optional For UI) BootStrap CSS and JS
	*/ -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyALOx2C2fT0p46-RLXmy5Wh5r1CaD_zGYU"></script>
	<script type="text/javascript">
	/**
	* Wait for the Dom to be ready
	*/
	$(document).ready(function(){
	/**
	* Set the global variables
	*/
	var loc;
	var map;
	var service;
	var infoWindow;
	var overlays = [];
	var resultList = [];
	var isMobile = $(window).width < 767;

	/**
	* Detect User location with HTML GEO api
	*/
	try {
	if (typeof navigator.geolocation !== 'undefined') {
	navigator.geolocation.getCurrentPosition (
	function(position) {
	var coords = position.coords;

	console.log(coords);

	/**
	* Store lat and long in loc variable
	*/
	loc = new google.maps.LatLng(coords.latitude, coords.longitude);

	/**
	* Set the map configs and requirements
	*/
	map = new google.maps.Map(document.getElementById("map_canvas"), {
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControl: false,
	center: loc,
	zoom: 13
	});
	console.log('loc-lat:',loc.mb, 'loc-long', loc.nb, 'map',map);

	service = new google.maps.places.PlacesService(map);
	infoWindow = new google.maps.InfoWindow();
	console.log(loc, map.mapUrl);
	},
	/**
	* Check for error if location is not enable or allowed and display message
	*/
	function(error) {
	if (error.code == 1) {
	$('#location-details').append('Please enable location tracking in your web browser');
	} else if (error.code == 2) {
	$('#location-details').append('Unable to determine location - please ensure location tracking is enabled in your browser');

	} else {
	$('#location-details').append('Unable to determine location');
	}
	},
	{enableHighAccuracy: true}
	);
	} else {
	$('#location-details').append('Your browser does not support location tracking');
	}
	} catch (e) {
	alert('An error has occured');
	}
	console.log('done location detection')

	/**
	* Plot the results to the map
	*/
	function plotResultList(){
	var iterator = 0;
	for(var i = 0; i < resultList.length; i++){
	setTimeout(function(){
	var lat = resultList[iterator].geometry.location.Za;
	var lng = resultList[iterator].geometry.location.Ya;
	var name = resultList[iterator].name;
	var addr = resultList[iterator].formatted_address;
	var reference = resultList[iterator].reference;



	console.log('name, addr, reference: ', name, addr, reference);

	/**
	* Spit results on page if you want to
	*/
	$('.result').append('<p><div>'+name, addr)+'</div></p>';

	var marker = new google.maps.Marker({
	position: resultList[iterator].geometry.location,
	map: map,
	title: name,
	animation: isMobile? 'undefined' : google.maps.Animation.DROP
	});
	overlays.push(marker);

	google.maps.event.addListener(marker, 'click', function() {
	infoWindow.close();
	var request = {
	reference: reference
	};

	service.getDetails(request, function(place, status){
	var content = "<h4>" + name + "</h4>";
	if(status == google.maps.places.PlacesServiceStatus.OK){
	if(typeof place.rating !== 'undefined'){
	var badgeType = '';
	if (place.rating < 2){
	badgeType = 'badge-important';
	} else if (place.rating >= 2 && place.rating <= 3){
	badgeType = 'badge-warning';
	} else {
	badgeType = 'badge-success';
	}
	content += "<p><small>Rating: <span class='badge " + badgeType + "'>" + place.rating + "</span></small></p>";
	}

	if(typeof place.formatted_address !== 'undefined'){
	content += "<br><small>" + place.formatted_address + "</small>";
	}

	if(typeof place.formatted_phone_number !== 'undefined'){
	content += "<br><small><a href='tel:" + place.formatted_phone_number + "'>" + place.formatted_phone_number + "</a></small>";
	}

	if(typeof place.website !== 'undefined'){
	content += "<br><small><a href='" + place.website + "'>website</a></small>";

	}
	}

	infoWindow.setContent(content);
	infoWindow.open(map, marker);
	});
	});
	iterator++;
	}, isMobile? 0: (i * 75));
	}
	}

	/**
	* On search submit get the POIs
	*/
	$('#search').submit(function(e){
	e.preventDefault();

	$('.result').empty();

	var query = $('#query').val();
	var request = {
	location: map.getCenter(),
	radius: '5000',
	query: query
	};

	service.textSearch(request, function(results, status, pagination){
	for(var i = 0; i < overlays.length; i++){
	overlays[i].setMap(null);
	}
	resultList.length = 0;
	overlays.length = 0;
	if (status == google.maps.places.PlacesServiceStatus.OK) {
	resultList = resultList.concat(results);
	plotResultList();
	}
	});
	});
	});
	</script>
	</body>
	</html>