Sanaldev/gmap_imgdiv_overlay

## gmap_imgdiv_overlay
<!DOCTYPE html>
<html>
<head>
    <title>GoogleMap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <style>

	#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

	#google-map-overlay { /* styles for overlay */
		width  : 100%;
		height : 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 99;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";       /* IE 8 */
		filter: alpha(opacity=90);  /* IE 5-7 */
		-moz-opacity: 0.9;          /* Netscape */
		-khtml-opacity: 0.9;        /* Safari 1.x */
		opacity: 0.9;               /* Good browsers */
		pointer-events: none;
	}
    </style>

</head>
<body>
	<div data-role="page" id="map-page" data-url="map-page" data-fullscreen="true">
		<div role="main" class="ui-content" id="map-canvas">
		</div>
		<div id="google-map-overlay">
		  <img src="Red_Roost.png" style="display:block;width:100%">
		</div>
	</div>
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="//maps.googleapis.com/maps/api/js?key=<googlemapkey>"></script>
	<script>

	$( document ).on( "pageinit", "#map-page", function() {

		var latlng = new google.maps.LatLng(-33.817683, 151.002141); // Store as center
		var myOptions = {
			zoom: 8,
			center: latlng,
			disableDefaultUI: true
		};
		map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
		org = new google.maps.LatLng (-33.803,151.012); //A - User
		dest = new google.maps.LatLng (-33.817683,151.002141); //B - Store
		wps2  = [];

		var rendererOptions = {map:map, suppressMarkers:true};
		var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
		var directionsService = new google.maps.DirectionsService;

		directionsDisplay.setMap(map);
		calculateAndDisplayRoute(directionsService, directionsDisplay);

		google.maps.event.addDomListener(document.getElementById('google-map-overlay'),'dblclick', function() {
			map.setZoom(map.getZoom() + 1);
        });

		function calculateAndDisplayRoute(directionsService, directionsDisplay) {

		  var request = {
					origin: org,
					destination: dest,
					waypoints: wps2,
					travelMode: google.maps.DirectionsTravelMode.WALKING
					};
		   var lineSymbol = {
					path: 'M 0,-1 0,1',
					strokeOpacity: 1,
					scale: 2
					};


		   directionsService = new google.maps.DirectionsService();
		   directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					var leg = response.routes[0].legs[0];
					var end_to_store = [leg.end_location,dest];
					var loc_to_start = [org,leg.start_location];


					directionsDisplay.setDirections(response);

					setTimeout(function(){
						makeMarker(org,'//maps.google.com/mapfiles/ms/icons/green-dot.png');
						makeMarker(dest,'//maps.google.com/mapfiles/ms/icons/red-dot.png');

					}, 1000);
					drawPolyLine(loc_to_start,lineSymbol);
					drawPolyLine(end_to_store,lineSymbol);
				}
				else
					alert ('failed to get directions');
			});
		}

		function makeMarker( position, icon ) {
			new google.maps.Marker({
				position: position,
				animation: google.maps.Animation.DROP,
				map: map,
				icon: icon
			});
		}

		function drawPolyLine(cordinates,line){
			new google.maps.Polyline({
				 path: cordinates,
				 strokeOpacity: 0,
				 strokeColor: '#0066cc',
				 icons: [{
					icon: line,
					offset: '0',
					repeat: '30px'
				   }],
				 map: map
		   });

		 }

	});
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>GoogleMap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
	<style>

	#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

	#google-map-overlay { /* styles for overlay */
	width : 100%;
	height : 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 99;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE 8 */
	filter: alpha(opacity=90); /* IE 5-7 */
	-moz-opacity: 0.9; /* Netscape */
	-khtml-opacity: 0.9; /* Safari 1.x */
	opacity: 0.9; /* Good browsers */
	pointer-events: none;
	}
	</style>

	</head>
	<body>
	<div data-role="page" id="map-page" data-url="map-page" data-fullscreen="true">
	<div role="main" class="ui-content" id="map-canvas">
	</div>
	<div id="google-map-overlay">
	<img src="Red_Roost.png" style="display:block;width:100%">
	</div>
	</div>
	<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
	<script src="//maps.googleapis.com/maps/api/js?key=<googlemapkey>"></script>
	<script>

	$( document ).on( "pageinit", "#map-page", function() {

	var latlng = new google.maps.LatLng(-33.817683, 151.002141); // Store as center
	var myOptions = {
	zoom: 8,
	center: latlng,
	disableDefaultUI: true
	};
	map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
	org = new google.maps.LatLng (-33.803,151.012); //A - User
	dest = new google.maps.LatLng (-33.817683,151.002141); //B - Store
	wps2 = [];

	var rendererOptions = {map:map, suppressMarkers:true};
	var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
	var directionsService = new google.maps.DirectionsService;

	directionsDisplay.setMap(map);
	calculateAndDisplayRoute(directionsService, directionsDisplay);

	google.maps.event.addDomListener(document.getElementById('google-map-overlay'),'dblclick', function() {
	map.setZoom(map.getZoom() + 1);
	});

	function calculateAndDisplayRoute(directionsService, directionsDisplay) {

	var request = {
	origin: org,
	destination: dest,
	waypoints: wps2,
	travelMode: google.maps.DirectionsTravelMode.WALKING
	};
	var lineSymbol = {
	path: 'M 0,-1 0,1',
	strokeOpacity: 1,
	scale: 2
	};


	directionsService = new google.maps.DirectionsService();
	directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	var leg = response.routes[0].legs[0];
	var end_to_store = [leg.end_location,dest];
	var loc_to_start = [org,leg.start_location];


	directionsDisplay.setDirections(response);

	setTimeout(function(){
	makeMarker(org,'//maps.google.com/mapfiles/ms/icons/green-dot.png');
	makeMarker(dest,'//maps.google.com/mapfiles/ms/icons/red-dot.png');

	}, 1000);
	drawPolyLine(loc_to_start,lineSymbol);
	drawPolyLine(end_to_store,lineSymbol);
	}
	else
	alert ('failed to get directions');
	});
	}

	function makeMarker( position, icon ) {
	new google.maps.Marker({
	position: position,
	animation: google.maps.Animation.DROP,
	map: map,
	icon: icon
	});
	}

	function drawPolyLine(cordinates,line){
	new google.maps.Polyline({
	path: cordinates,
	strokeOpacity: 0,
	strokeColor: '#0066cc',
	icons: [{
	icon: line,
	offset: '0',
	repeat: '30px'
	}],
	map: map
	});

	}

	});
	</script>
	</body>
	</html>