Sanaldev/gmap_jq.html

## gmap_jq.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>
	.gm-style-iw{
		top: 10px !important;
        left: 12px !important;
	}

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

	@font-face {
		font-family: "Akkurat-Regular";
		src: url('/Akkurat-Light.woff') format('woff'),
		     url('/Akkurat-Light.otf') format('otf');

    }

	.infowindow {
		border-radius: 2px 2px 2px 2px;
		font-family: "Akkurat-Regular";
		color:#16284c;
		text-align:left;
		z-index: 10;
		text-decoration:none;
	}
    </style>

</head>
<body>
	<div data-role="page" id="map-page" data-url="map-page" data-fullscreen="true" style="background: #fff;">
		<div role="main" class="ui-content" id="map-canvas">
		</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);

		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');
						var icon_dest ='//maps.google.com/mapfiles/ms/icons/red-dot.png';
						marker = new google.maps.Marker({
									position: dest,
									animation: google.maps.Animation.DROP,
									map: map,
									icon: icon_dest
								});
						var address ='159-175 Church Street, Shop 5012 Westfield Parramatta, NSW 2150, Australia';
						var contentString = '<table style="background:#fff;border:0px solid #ccc;padding:0px 0px 0.2px 0.4px;" class="infowindow" ><tr><td style="border:1px solid #ccc;line-height:13px;">'+
											'<img src="logox480.png" style="border:0px;padding:0px;margin:0px;display:block;" width="46" height="45"/>'+
											'</td><td style="line-height:13px;background:#fff;">'+'<span style="font-size:12px;text-align:top;vertical-align:top;">'+
											address+'</span></td></tr></table>';

						infowindow = new google.maps.InfoWindow({
								content: contentString,
								maxWidth: 250
								//disableAutoPan:true
						});

						infowindow.open(map, marker);

						google.maps.event.addListener(marker, 'click',
							function(event){
								infowindow.open(map, this);
							}
						);


					}, 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>
	.gm-style-iw{
	top: 10px !important;
	left: 12px !important;
	}

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

	@font-face {
	font-family: "Akkurat-Regular";
	src: url('/Akkurat-Light.woff') format('woff'),
	url('/Akkurat-Light.otf') format('otf');

	}

	.infowindow {
	border-radius: 2px 2px 2px 2px;
	font-family: "Akkurat-Regular";
	color:#16284c;
	text-align:left;
	z-index: 10;
	text-decoration:none;
	}
	</style>

	</head>
	<body>
	<div data-role="page" id="map-page" data-url="map-page" data-fullscreen="true" style="background: #fff;">
	<div role="main" class="ui-content" id="map-canvas">
	</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);

	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');
	var icon_dest ='//maps.google.com/mapfiles/ms/icons/red-dot.png';
	marker = new google.maps.Marker({
	position: dest,
	animation: google.maps.Animation.DROP,
	map: map,
	icon: icon_dest
	});
	var address ='159-175 Church Street, Shop 5012 Westfield Parramatta, NSW 2150, Australia';
	var contentString = '<table style="background:#fff;border:0px solid #ccc;padding:0px 0px 0.2px 0.4px;" class="infowindow" ><tr><td style="border:1px solid #ccc;line-height:13px;">'+
	'<img src="logox480.png" style="border:0px;padding:0px;margin:0px;display:block;" width="46" height="45"/>'+
	'</td><td style="line-height:13px;background:#fff;">'+'<span style="font-size:12px;text-align:top;vertical-align:top;">'+
	address+'</span></td></tr></table>';

	infowindow = new google.maps.InfoWindow({
	content: contentString,
	maxWidth: 250
	//disableAutoPan:true
	});

	infowindow.open(map, marker);

	google.maps.event.addListener(marker, 'click',
	function(event){
	infowindow.open(map, this);
	}
	);


	}, 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>