Add Google Map

Add Google Map

<script>

</script>

<center>
<form>
<A HREF="#" OnClick="fullwin()">Open Full Screen Window</A>

</form>
</center>

<!DOCTYPE html>
<html>
<head>
<title>SAMRAT KESHARI PARIDA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<script>

</script>
</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>SAMRAT KESHARI PARIDA</h1>
</div>

<div data-role="content">
<p>SAMRAT KESHARI PARIDA</p>
<div id='map-canvas' style="background-size:100%;height:300PX; width:300px; z-index:10000;"></div>
<div onclick="getDirction()"><A HREF="#">Getdirection </A></div>
<A HREF="#" OnClick="fullwin()">Open Full Screen Window</A>
</div>

</div>
<script>
var map1=
$( document ).ready(function() {

//var mylong=$('#mylong').val();
var myLatlng = new google.maps.LatLng(28.635308, 77.224960);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapMaker: true,
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map1=map;
var infowindow = new google.maps.InfoWindow({
content: '<p>SAMRAT KESHARI PARIDA<p>Kendrapara, Odisha</p>',
maxWidth: 500
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon:'samrat.png',
title: 'Hello World!'
});
google.maps.event.addListener(marker, 'click', function (event) {
infowindow.open(map, marker);
});
});

function onPositionUpdate(position) {
var mylat = position.coords.latitude;
var mylong= position.coords.longitude;
var comlat=20.5176;
var comlong=86.38765;
//var comlat=38.907231
//var comlong=-77.036464;
var start = mylat+","+mylong;
var end = comlat+","+comlong;
var request =
{
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};

var map = map1;

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
var latlng = new google.maps.LatLng(comlat,comlong);
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(comlat,comlong),
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map-canvas'),myOptions);

directionsDisplay.setMap(map);
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth:500
});
var marker = new google.maps.Marker({
position: map.getCenter(),
icon:'samrat.png',
map: map,
title: ''
});
google.maps.event.addListener(marker, 'click', function() {
//alert(1);
infowindow.open(map,marker);
});
}
function getDirction(){
navigator.geolocation.getCurrentPosition(onPositionUpdate);
}
</script>
</body>
</html>

Comments