mertcek123
Programmer
This is my google maps code. I want to add ajax search bar.
But my aim is to show "hospitals, pharmacy, car rental" things like that at the page onLoad.
I want it to show the results of the things that I said, in the circle that I made on my map which is a 1250m radius circle from your geolocation.
I hope you understand what I mean.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Geolocation with Google Maps Demo | Odeon</title>
<style type="text/css">
#map{
width: 750px;
height: 500px;
position: absolute;
}
#adres{
position: absolute;
width: 400px;
top: 250px;
right: 50px;
text-align: center;
background: white;
background-color: rgba(255, 255, 255, .85);
padding: 5px 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
visibility: hidden;
}
</style>
<script type="text/javascript" src="<script>
var mapDiv;
window.onload = function(){
mapDiv = document.getElementById('map');
mapDiv.innerHTML = 'Trying to get your location...';
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(handleGetCurrentPosition, handleGetCurrentPositionError);
}
function handleGetCurrentPosition(location){
var position = new google.maps.LatLng(location.coords.latitude, location.coords.longitude)
var map = new google.maps.Map(mapDiv, {
zoom: 14,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var circle = new google.maps.Circle({
center
osition,
map:map,
radius: 1250,
fillColor: "#2621BF",
fillOpacity:0.6,
strokeColor: "#000",
strokeOpacity: 0.3,
strokeWeight: 1
})
var marker = new google.maps.Marker({
position: position,
map: map
})
new google.maps.Geocoder().geocode({location: position}, handleGeocoderGetLocations);
}
function handleGeocoderGetLocations( addresses, status ){
if (status != google.maps.GeocoderStatus.OK)
return maybe_log( 'failed to talk to google' );
var city = getCityFromPlacemarks(addresses);
var country = getCountryFromPlacemarks(addresses);
var mapOverlay = document.getElementById('adres');
mapOverlay.innerHTML = 'Adres <strong>' + addresses[0].formatted_address + '</strong>';
mapOverlay.style.visibility = 'visible';
}
function getCityFromPlacemarks( placemarks ){
return extractNameFromGoogleGeocoderResults('locality', placemarks)
}
function getCountryFromPlacemarks(placemarks){
return extractNameFromGoogleGeocoderResults('country', placemarks)
}
function extractNameFromGoogleGeocoderResults(type, results){
for( var i = 0, l = results.length; i < l; i ++)
for(var j = 0, l2 = results.types.length; j < l2; j++ )
if( results.types[j] == type )
return results.address_components[0].long_name;
return ''
}
function handleGetCurrentPositionError(){
mapDiv.innerHTML = 'Something went horribly wrong!';
}
</script>
</head>
<body>
<div id="map"><noscript>
</noscript></div>
<div id="adres"></div>
</body>
</html>
But my aim is to show "hospitals, pharmacy, car rental" things like that at the page onLoad.
I want it to show the results of the things that I said, in the circle that I made on my map which is a 1250m radius circle from your geolocation.
I hope you understand what I mean.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Geolocation with Google Maps Demo | Odeon</title>
<style type="text/css">
#map{
width: 750px;
height: 500px;
position: absolute;
}
#adres{
position: absolute;
width: 400px;
top: 250px;
right: 50px;
text-align: center;
background: white;
background-color: rgba(255, 255, 255, .85);
padding: 5px 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
visibility: hidden;
}
</style>
<script type="text/javascript" src="<script>
var mapDiv;
window.onload = function(){
mapDiv = document.getElementById('map');
mapDiv.innerHTML = 'Trying to get your location...';
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(handleGetCurrentPosition, handleGetCurrentPositionError);
}
function handleGetCurrentPosition(location){
var position = new google.maps.LatLng(location.coords.latitude, location.coords.longitude)
var map = new google.maps.Map(mapDiv, {
zoom: 14,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var circle = new google.maps.Circle({
center
osition,map:map,
radius: 1250,
fillColor: "#2621BF",
fillOpacity:0.6,
strokeColor: "#000",
strokeOpacity: 0.3,
strokeWeight: 1
})
var marker = new google.maps.Marker({
position: position,
map: map
})
new google.maps.Geocoder().geocode({location: position}, handleGeocoderGetLocations);
}
function handleGeocoderGetLocations( addresses, status ){
if (status != google.maps.GeocoderStatus.OK)
return maybe_log( 'failed to talk to google' );
var city = getCityFromPlacemarks(addresses);
var country = getCountryFromPlacemarks(addresses);
var mapOverlay = document.getElementById('adres');
mapOverlay.innerHTML = 'Adres <strong>' + addresses[0].formatted_address + '</strong>';
mapOverlay.style.visibility = 'visible';
}
function getCityFromPlacemarks( placemarks ){
return extractNameFromGoogleGeocoderResults('locality', placemarks)
}
function getCountryFromPlacemarks(placemarks){
return extractNameFromGoogleGeocoderResults('country', placemarks)
}
function extractNameFromGoogleGeocoderResults(type, results){
for( var i = 0, l = results.length; i < l; i ++)
for(var j = 0, l2 = results.types.length; j < l2; j++ )
if( results.types[j] == type )
return results.address_components[0].long_name;
return ''
}
function handleGetCurrentPositionError(){
mapDiv.innerHTML = 'Something went horribly wrong!';
}
</script>
</head>
<body>
<div id="map"><noscript>
</noscript></div>
<div id="adres"></div>
</body>
</html>