Nearby places with a Range of Google Map.
Show Nearby places link sbi Bank with in a range of 500Meters. It will also show the distance from my present location.
Description:
First we define my Location on Map. We define the list of categories like bank, cafe, atm etc. We also define the range as 100,500,1500 or 9000 to select. Once category and range is selected then List of near by places are listed. These are further filtered. Example like category as bank and filter as SBI bank. Then only SBI banks can be listed. Marker will show the near by places along with distance from my location.
Queries
1. How to get category wise list of places name? Category like cafe, atm etc.
2. How to get near by places within a range? Like sbi atm near 500 meters.
3. How to filter further from list of nearby places? Like sbi bank from category as bank.
4. How to calculate distance of each nearby places from my place.
Development Steps
1. Locate for my present location and plot on Map.
2. Get the List of categories like atm, cafe, bank etc. Select one.
3. Get the range as 100,500,1500 or 9000. And select one.
4. Show names of near by places.
5. Filter further. Category like Bank filter as SBI.
6. List Data based on Filter.
7. Plot all data on Map.
8. Calculate the distance from my location and show with each marker.
Method used to save session variables.
function savesession()
{
sessionStorage.setItem("sessionaddress",document.getElementById('address').value);
sessionStorage.setItem("pyrmontlat",document.getElementById('lat').value);
sessionStorage.setItem("pyrmontlng",document.getElementById('lng').value);
sessionStorage.setItem("sessionmyloc",document.getElementById('myloc').value);
sessionStorage.setItem("sessiondist",document.getElementById('dist').value);
}
Statement used to get session variables.
document.getElementById('address').value=sessionStorage.getItem('sessionaddress');
document.getElementById('lat').value=sessionStorage.getItem('pyrmontlat');
document.getElementById('lng').value=sessionStorage.getItem('pyrmontlng');
document.getElementById('myloc').value=sessionStorage.getItem('sessionmyloc');
document.getElementById('dist').value=sessionStorage.getItem('sessiondist');
Prerequisite Code Required.
1. myjavascript.js
2. mystyle.css
3. MarkerWithLabel.js
Google Library used as
libraries=places,geometry
File Name: map_nearby.html
Coding
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./script/mystyle.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsJ8vVyCoHrvZuGxuhcwhlDEZtevVyoo8&callback=initMap&libraries=places,geometry" async defer></script>
<script src="./script/myjavascript.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
//variables
var map;
var lat = sessionStorage.getItem('pyrmontlat');
var lng = sessionStorage.getItem('pyrmontlng');
var pyrmont;
var address;
var marker;
var infoWindow;
var markers = [];
var ttypes; //value of type like 'atm','cafe';
var range = 500;
var filter;
var calval=0;
//initialize Map
function initMap()
{
//lat=27;lng=77;
pyrmont = {lat: parseFloat(lat), lng: parseFloat(lng)};
map = new google.maps.Map(document.getElementById('map'),
{
center: pyrmont,
zoom: 10
});
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.BOUNCE,
title:'My Present Location',
icon: {url:"./images/present.png",scaledSize : new google.maps.Size(40, 40)},
position: {lat: parseFloat(lat), lng: parseFloat(lng)}
});
//update the values of opt options for selection.
fn_type('opt');
var service = new google.maps.places.PlacesService(map)
service.nearbySearch(
{
location: pyrmont,
radius: range,
type: [ttypes],
name: filter
}, processResults);
function processResults(results,status,pagination)
{
if (status !==google.maps.places.PlacesServiceStatus.OK)
{ var placelist=document.getElementById('places');
placelist.innerHTML="";return;}else
{
createMarker(results);
//if data is more
if (pagination.hasNextPage)
{
var morebut= document.getElementById('More');
morebut.disabled=false;
morebut.addEventListener('click', function()
{
morebut.disabled=true;
pagination.nextPage();
});
}
}
}
function createMarker(places)
{ var placelist=document.getElementById('places');
placelist.innerHTML="";
for (var i=0,place;place=places[i];i++)
{
calculatedistance(pyrmont.lat,pyrmont.lng,place.geometry.location.lat(),place.geometry.location.lng());
marker = new google.maps.Marker({map:map,position:place.geometry.location,
title:'Distance From My Location: '+calval+' KM. '
})
placelist.innerHTML +="<li>"+(i+1)+"|"+place.name+"|"+place.geometry.location.lat()+"|"+place.geometry.location.lng()+"</li>";
map.setZoom(14);
}
}
//define event of UL.
var disp_mark = document.getElementById('places');
disp_mark.onclick = function(event)
{
//alert(event.target.innerHTML);
data=event.target.innerHTML.split('|');
fn_mark(data);
}
}
function fn_mark(para)
{
//alert(para[2]);
new google.maps.Marker({map:map,position:{lat:parseFloat(para[2]),lng:parseFloat(para[3])},icon:{path:google.maps.SymbolPath.CIRCLE,scale:5}});
}
function fn_type_opt()
{
ttypes = document.getElementById('opt').value;
initMap();
}
function fn_sel(para)
{
if (document.getElementById('range1').checked) range=document.getElementById('range1').value;
if (document.getElementById('range2').checked) range=document.getElementById('range2').value;
if (document.getElementById('range3').checked) range=document.getElementById('range3').value;
if (document.getElementById('range4').checked) range=document.getElementById('range4').value;
initMap();
}
function fn_submit()
{
filter=document.getElementById('filter').value;
initMap();
}
function calculatedistance(s1,s2,e1,e2)
{
var latlngA= new google.maps.LatLng(s1,s2); //Point A
var latlngB= new google.maps.LatLng(e1,e2); //Point B
//Calculate distance in meters between two points A and B.
var dist =google.maps.geometry.spherical.computeDistanceBetween (latlngA, latlngB);
calval=(dist/1000).toFixed(2);
}
</script>
<body>
<div id='map'>Loading..</div>
<div id='heading'>Know NearBy Places</div>
<div id='subheading'>( Within Range )</div>
<div id='right-window' style="margin-left: 75%;width:310px;">
<table>
<tr>
<td>Select Type: </td><td><select id="opt" name="opt" onchange="fn_type_opt('opt')"/> </td>
</tr>
<tr>
<td>Range:</td>
<td>
<input type="radio" id="range1" name="range" value="500" checked onclick="fn_sel(this)"/>500
<input type="radio" id="range2" name="range" value="1000" onclick="fn_sel(this)"/>1000
<input type="radio" id="range3" name="range" value="5000" onclick="fn_sel(this)"/>5000
<input type="radio" id="range4" name="range" value="9900" onclick="fn_sel(this)"/>9900
</td>
</tr>
<tr>
<td colspan="2">
<ul id="places" ></ul>
</td>
<tr>
<td colspan="2">
<input type="button" id="More" value="More" />
</td>
</tr>
<tr>
<td>Filter:</td><td><input id="filter" size="15" ></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="submit" value="submit" onclick="fn_submit()"></td>
</tr>
</table>
</div>
<div id='bottom-window' hidden>Bottom Panel</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./script/mystyle.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsJ8vVyCoHrvZuGxuhcwhlDEZtevVyoo8&callback=initMap&libraries=places,geometry" async defer></script>
<script src="./script/myjavascript.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
//variables
var map;
var lat = sessionStorage.getItem('pyrmontlat');
var lng = sessionStorage.getItem('pyrmontlng');
var pyrmont;
var address;
var marker;
var infoWindow;
var markers = [];
var ttypes; //value of type like 'atm','cafe';
var range = 500;
var filter;
var calval=0;
//initialize Map
function initMap()
{
//lat=27;lng=77;
pyrmont = {lat: parseFloat(lat), lng: parseFloat(lng)};
map = new google.maps.Map(document.getElementById('map'),
{
center: pyrmont,
zoom: 10
});
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.BOUNCE,
title:'My Present Location',
icon: {url:"./images/present.png",scaledSize : new google.maps.Size(40, 40)},
position: {lat: parseFloat(lat), lng: parseFloat(lng)}
});
//update the values of opt options for selection.
fn_type('opt');
var service = new google.maps.places.PlacesService(map)
service.nearbySearch(
{
location: pyrmont,
radius: range,
type: [ttypes],
name: filter
}, processResults);
function processResults(results,status,pagination)
{
if (status !==google.maps.places.PlacesServiceStatus.OK)
{ var placelist=document.getElementById('places');
placelist.innerHTML="";return;}else
{
createMarker(results);
//if data is more
if (pagination.hasNextPage)
{
var morebut= document.getElementById('More');
morebut.disabled=false;
morebut.addEventListener('click', function()
{
morebut.disabled=true;
pagination.nextPage();
});
}
}
}
function createMarker(places)
{ var placelist=document.getElementById('places');
placelist.innerHTML="";
for (var i=0,place;place=places[i];i++)
{
calculatedistance(pyrmont.lat,pyrmont.lng,place.geometry.location.lat(),place.geometry.location.lng());
marker = new google.maps.Marker({map:map,position:place.geometry.location,
title:'Distance From My Location: '+calval+' KM. '
})
placelist.innerHTML +="<li>"+(i+1)+"|"+place.name+"|"+place.geometry.location.lat()+"|"+place.geometry.location.lng()+"</li>";
map.setZoom(14);
}
}
//define event of UL.
var disp_mark = document.getElementById('places');
disp_mark.onclick = function(event)
{
//alert(event.target.innerHTML);
data=event.target.innerHTML.split('|');
fn_mark(data);
}
}
function fn_mark(para)
{
//alert(para[2]);
new google.maps.Marker({map:map,position:{lat:parseFloat(para[2]),lng:parseFloat(para[3])},icon:{path:google.maps.SymbolPath.CIRCLE,scale:5}});
}
function fn_type_opt()
{
ttypes = document.getElementById('opt').value;
initMap();
}
function fn_sel(para)
{
if (document.getElementById('range1').checked) range=document.getElementById('range1').value;
if (document.getElementById('range2').checked) range=document.getElementById('range2').value;
if (document.getElementById('range3').checked) range=document.getElementById('range3').value;
if (document.getElementById('range4').checked) range=document.getElementById('range4').value;
initMap();
}
function fn_submit()
{
filter=document.getElementById('filter').value;
initMap();
}
function calculatedistance(s1,s2,e1,e2)
{
var latlngA= new google.maps.LatLng(s1,s2); //Point A
var latlngB= new google.maps.LatLng(e1,e2); //Point B
//Calculate distance in meters between two points A and B.
var dist =google.maps.geometry.spherical.computeDistanceBetween (latlngA, latlngB);
calval=(dist/1000).toFixed(2);
}
</script>
<body>
<div id='map'>Loading..</div>
<div id='heading'>Know NearBy Places</div>
<div id='subheading'>( Within Range )</div>
<div id='right-window' style="margin-left: 75%;width:310px;">
<table>
<tr>
<td>Select Type: </td><td><select id="opt" name="opt" onchange="fn_type_opt('opt')"/> </td>
</tr>
<tr>
<td>Range:</td>
<td>
<input type="radio" id="range1" name="range" value="500" checked onclick="fn_sel(this)"/>500
<input type="radio" id="range2" name="range" value="1000" onclick="fn_sel(this)"/>1000
<input type="radio" id="range3" name="range" value="5000" onclick="fn_sel(this)"/>5000
<input type="radio" id="range4" name="range" value="9900" onclick="fn_sel(this)"/>9900
</td>
</tr>
<tr>
<td colspan="2">
<ul id="places" ></ul>
</td>
<tr>
<td colspan="2">
<input type="button" id="More" value="More" />
</td>
</tr>
<tr>
<td>Filter:</td><td><input id="filter" size="15" ></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="submit" value="submit" onclick="fn_submit()"></td>
</tr>
</table>
</div>
<div id='bottom-window' hidden>Bottom Panel</div>
</body>
</html>
map is not working...
ReplyDeletewhere are its .css and .js files?
This comment has been removed by the author.
Deletemyjavascript.js =http://webappdevcoding.blogspot.com/p/myjavascript.html
Deletemystyle.css=http://webappdevcoding.blogspot.com/p/myjavascript.html
Deletemd {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new md (https://maps.googleapis.com/m…allback=initMap&libraries=places,geometry:164:124"}
Deletemessage: "initMap is not a function"
name: "InvalidValueError"
stack: "Error↵ at new md (https://maps.googleapis.com/maps/api/js?
I got this error...^
Where can i get the complete code.Please let me know
ReplyDelete