maxrosecollins/gist:2923370

## gistfile1.phtml
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <title>App</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="css/style.css">

    <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="maps" data-role="page">
        <script type="text/javascript">

            var map;
            var infowindow;
            var markers = [];

            $('#maps').live("pageshow", function() {
                initialize();
            });

            function initialize() {
                map = new google.maps.Map(document.getElementById("map"), {
                    center: new google.maps.LatLng(51.51969236771462, -0.08304119110107422),
                    zoom: 16,
                    mapTypeId: 'roadmap'
                  });
            }

            function doSearch() {
                deleteOverlays();
                var query = document.getElementById("queryInput").value;

                var request = {
                  location: new google.maps.LatLng(51.51969236771462, -0.08304119110107422),
                  radius: 1000,
                  keyword: [query]
                };
                infowindow = new google.maps.InfoWindow();
                var service = new google.maps.places.PlacesService(map);
                service.search(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
                });

                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent('<span style="padding: 0px; text-align:left" align="left"><h4>' + place.name + '</h4></span>');
                  infowindow.open(map, this);
                });
                markers.push(marker);
            }

            function setAllMap(map) {
                for (var i = 0; i < markers.length; i++) {
                  markers[i].setMap(map);
                }
            }
            function clearOverlays() {
                setAllMap(null);
            }

            function deleteOverlays() {
                clearOverlays();
                markers = [];
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        <div data-role="header">
            <a href="/preview/ec/" data-prefetch data-icon="back" data-transition="slidefade">Back</a>
        <h1>Google Maps</h1>
        </div>
        <div id="map-container" data-role="content">
            <div class="ui-bar ui-bar-c">
                    <input type="search" id="queryInput" value="coffee" />
                    <input type="button" value="Find" onclick="doSearch()" />
                    <div id="searchwell"></div>
            </div>
                  <div id="map" style="height: 654px; width: 100%;"></div>
        </div>
    </div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
	<title>App</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="css/style.css">

	<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
	<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="maps" data-role="page">
	<script type="text/javascript">

	var map;
	var infowindow;
	var markers = [];

	$('#maps').live("pageshow", function() {
	initialize();
	});

	function initialize() {
	map = new google.maps.Map(document.getElementById("map"), {
	center: new google.maps.LatLng(51.51969236771462, -0.08304119110107422),
	zoom: 16,
	mapTypeId: 'roadmap'
	});
	}

	function doSearch() {
	deleteOverlays();
	var query = document.getElementById("queryInput").value;

	var request = {
	location: new google.maps.LatLng(51.51969236771462, -0.08304119110107422),
	radius: 1000,
	keyword: [query]
	};
	infowindow = new google.maps.InfoWindow();
	var service = new google.maps.places.PlacesService(map);
	service.search(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
	});

	google.maps.event.addListener(marker, 'click', function() {
	infowindow.setContent('<span style="padding: 0px; text-align:left" align="left"><h4>' + place.name + '</h4></span>');
	infowindow.open(map, this);
	});
	markers.push(marker);
	}

	function setAllMap(map) {
	for (var i = 0; i < markers.length; i++) {
	markers[i].setMap(map);
	}
	}
	function clearOverlays() {
	setAllMap(null);
	}

	function deleteOverlays() {
	clearOverlays();
	markers = [];
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	<div data-role="header">
	<a href="/preview/ec/" data-prefetch data-icon="back" data-transition="slidefade">Back</a>
	<h1>Google Maps</h1>
	</div>
	<div id="map-container" data-role="content">
	<div class="ui-bar ui-bar-c">
	<input type="search" id="queryInput" value="coffee" />
	<input type="button" value="Find" onclick="doSearch()" />
	<div id="searchwell"></div>
	</div>
	<div id="map" style="height: 654px; width: 100%;"></div>
	</div>
	</div>
	</body>
	</html>