Hello, I am new to the Google Maps API and I'm trying to build out
html5 geolocation demo. I have the geolocation part working, but what
I want to do is also show nearby "things" based on where you are. For
example, all the nearby pizza parlors or parks or whatever keyword.
For example, if you were to go to maps.google.com and search for
"hollywood, ca" you'll get the pinpoint on Hollywood. If you then do
a "search nearby" for "pizza" you'll get all the nearby pizza places
in Hollywood. This is what I want to replicate.
I'm faking it right now by mapping out 10 random pinpoints, but I want
those pinpoints to not be random, I want those to be my nearby
keyword.
Below is the full code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>HTML 5 GeoLocation Demo</title>
<style type="text/css">
#main {
width:500px;
margin:0 auto;
}
h1 {
text-align:center;
}
span#address {
font-weight:bold;
}
#map_canvas {
width:500px;
height:300px;
border:4px solid #666;
position:relative;
z-index:1;
}
#map_overlay {
position:absolute;
top:0;
left:0;
z-index:10;
width:500px;
height:300px;
background:#eee url(ajax-loader.gif) no-repeat center center;
display:inline-block;
}
</style>
</head>
<body onload="initialize()">
<div id="main">
<form action="#" onsubmit="showLocation(); return false;">
<input type="hidden" name="q" value="" class="address_input" />
</form>
<div id="map_canvas"></div>
<p>Your location is: <span id="address">Unknown!</span></p>
</div>
<script src="http://maps.google.com/maps?
file=api&v=2&sensor=false
&key=ABQIAAAA8JXb0YDVa4otOLnM95w50BSeC_rwpfX9fQb-
nbMGMDH8BB4BVRTjxWS14T5WLZf7TpXaaAtk_SIb-Q"
type="text/javascript">
</script>
<script type="text/javascript">
var map,
geocoder,
theMapOverlay;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
//map.setCenter(new GLatLng(34, 0), 1);
geocoder = new GClientGeocoder();
var theMap = document.getElementById('map_canvas');
theMapOverlay = document.createElement('span');
theMapOverlay.setAttribute('id', 'map_overlay');
theMap.appendChild(theMapOverlay);
}
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.setCenter(point, 13); //lower number zooms the map view
out
map.openInfoWindowHtml(
map.getCenter(),
"<div style='width:275px;'><p style='margin:0 0 5px;
0;'>It looks like you're about here.</p><p style='margin:0;'>Here are
some nearby Pizza parlors.</p></div>"
);
map.addOverlay(marker);
var addr = document.getElementById('address');
addr.firstChild.innerHTML = place.address;
//add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
}
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
theMapOverlay.style.display = 'none';
}
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
s = position.coords.latitude+","+position.coords.longitude;
document.forms[0].q.value = s;
showLocation();
});
} else {
alert("I'm sorry, but geolocation services are not supported by your
browser.");
}
</script>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
