Show Satellite view on Google Map.
Satellite View of Google Map with different markers and latitude & Longitude.
Description:
This page is showing Satellite View of Google Map, It is also showing markers of different colour of markers. When the cursing is moved on screen., the location name is captured and saved in caption TextView for the distance traveled.
Queries
· How to use different shapes of markers and define various options of marker?
· How to put color to each marker?
· How to define marker listeners?
· How to define Bounce animation to marker and stop after some time?
Development Steps
· Define various shapes markers
· Drag marker and save lat and longitude.
· Save near about places name in table as last visited place.
· Define Info window an display the Last visited place name.
· Reverse Geo coding get formatted address.
· With lat lang
· With address.
· Use Animation for Markers.
· Define listener for marker.
· Update lat/lng on drag
· Update formatted_address on drag end using infowindow.
Method used to save and get session variables.
Statement 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=geometry
Coding
File Name: map_satellite.html.
Satellite View of Google Map with different markers and latitude & Longitude.
Description:
This page is showing Satellite View of Google Map, It is also showing markers of different colour of markers. When the cursing is moved on screen., the location name is captured and saved in caption TextView for the distance traveled.
Queries
· How to use different shapes of markers and define various options of marker?
· How to put color to each marker?
· How to define marker listeners?
· How to define Bounce animation to marker and stop after some time?
Development Steps
· Define various shapes markers
· Drag marker and save lat and longitude.
· Save near about places name in table as last visited place.
· Define Info window an display the Last visited place name.
· Reverse Geo coding get formatted address.
· With lat lang
· With address.
· Use Animation for Markers.
· Define listener for marker.
· Update lat/lng on drag
· Update formatted_address on drag end using infowindow.
Method used to save and get session variables.
Statement 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=geometry
Coding
File Name: map_satellite.html.
<!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=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 = [];
//initialize Map
function initMap()
{
//lat=27;lng=77;
pyrmont = {lat: parseFloat(lat), lng: parseFloat(lng)};
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById('map'),
{ mapTypeId: google.maps.MapTypeId.SATELLITE,
center: pyrmont,
zoom: 20
});
marker = new google.maps.Marker({
map: map,
draggable: true,
position : {lat: parseFloat(lat), lng: parseFloat(lng)}
});
//events on marker - 1.drag event
marker.addListener('drag', function(event)
{
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
//events on marker - 2.drag END event once the drag is over and mouse/click is removed, update lat/lng
marker.addListener('dragend', function(event)
{
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
fn_view(geocoder,map,infowindow);
});
//reverse geocoding - display location based on lat/lng saved.
function fn_view(geocoder, map, infowindow)
{
var latlng={lat:parseFloat(document.getElementById('lat').value),lng:parseFloat(document.getElementById('lng').value)};
geocoder.geocode({'location':latlng}, function (results, status)
{
if (status === google.maps.GeocoderStatus.OK)
{ if (results[1])
{
infowindow.setContent("<table><tr><th>Place Name</th></tr><tr><td>"+results[1].formatted_address+"</td></tr></table>");
infowindow.open(map, marker);
//add list of last places visited.
add_list('list',results[1].formatted_address);
} else {
window.alert('Error' + status);
}
}
});
add_list('list',results[1].formatted_address);
}
}
</script>
<body>
<div id='map'>Loading..</div>
<div id='heading'>Satellite View</div>
<div id='subheading'>Know Place Around</div>
<div id='right-window'>
Select Markers</br></br>
<input type="radio" id="arrow" name="marker" value="arrow" onclick="fn_marker(this)">Arrow</br></br>
<input type="radio" id="circle" name="marker" value="circle" onclick="fn_marker(this)">Circle</br></br>
<input type="radio" id="custom" name="marker" value="custom" onclick="fn_marker(this)">Custom</br></br>
<input type="radio" id="marker1" name="marker" value="mark" onclick="fn_marker(this)">Marker</br></br>
Latitude:<input type="text" id="lat" value="" readonly></br></br>
Longitude:<input type="text" id="lng" value="" readonly></br></br>
</div>
<div id='bottom-window' style="overflow: auto;height:80px">
List Last visits ( Drag Marker and add details)
<ul id="list"/>
</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=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 = [];
//initialize Map
function initMap()
{
//lat=27;lng=77;
pyrmont = {lat: parseFloat(lat), lng: parseFloat(lng)};
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById('map'),
{ mapTypeId: google.maps.MapTypeId.SATELLITE,
center: pyrmont,
zoom: 20
});
marker = new google.maps.Marker({
map: map,
draggable: true,
position : {lat: parseFloat(lat), lng: parseFloat(lng)}
});
//events on marker - 1.drag event
marker.addListener('drag', function(event)
{
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
});
//events on marker - 2.drag END event once the drag is over and mouse/click is removed, update lat/lng
marker.addListener('dragend', function(event)
{
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
fn_view(geocoder,map,infowindow);
});
//reverse geocoding - display location based on lat/lng saved.
function fn_view(geocoder, map, infowindow)
{
var latlng={lat:parseFloat(document.getElementById('lat').value),lng:parseFloat(document.getElementById('lng').value)};
geocoder.geocode({'location':latlng}, function (results, status)
{
if (status === google.maps.GeocoderStatus.OK)
{ if (results[1])
{
infowindow.setContent("<table><tr><th>Place Name</th></tr><tr><td>"+results[1].formatted_address+"</td></tr></table>");
infowindow.open(map, marker);
//add list of last places visited.
add_list('list',results[1].formatted_address);
} else {
window.alert('Error' + status);
}
}
});
add_list('list',results[1].formatted_address);
}
}
</script>
<body>
<div id='map'>Loading..</div>
<div id='heading'>Satellite View</div>
<div id='subheading'>Know Place Around</div>
<div id='right-window'>
Select Markers</br></br>
<input type="radio" id="arrow" name="marker" value="arrow" onclick="fn_marker(this)">Arrow</br></br>
<input type="radio" id="circle" name="marker" value="circle" onclick="fn_marker(this)">Circle</br></br>
<input type="radio" id="custom" name="marker" value="custom" onclick="fn_marker(this)">Custom</br></br>
<input type="radio" id="marker1" name="marker" value="mark" onclick="fn_marker(this)">Marker</br></br>
Latitude:<input type="text" id="lat" value="" readonly></br></br>
Longitude:<input type="text" id="lng" value="" readonly></br></br>
</div>
<div id='bottom-window' style="overflow: auto;height:80px">
List Last visits ( Drag Marker and add details)
<ul id="list"/>
</div>
</body>
</html>
No comments:
Post a Comment