Last active
December 14, 2015 17:39
-
-
Save ankurpshah/5123851 to your computer and use it in GitHub Desktop.
Map Control Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
<meta charset="utf-8"> | |
<title>Google Maps JavaScript API v3 Example: Simple Controls</title> | |
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyDZ82d3j-OqU8JHoU8JSAz-gJFty9ERrao"></script> | |
<script> | |
function initialize() { | |
var mapOptions = { | |
zoom: 12, | |
center: new google.maps.LatLng(22.989945,72.486778), | |
panControl: false, | |
zoomControl: false, | |
scaleControl: true, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
} | |
var map = new google.maps.Map(document.getElementById('map_canvas'), | |
mapOptions); | |
} | |
</script> | |
</head> | |
<body onload="initialize()"> | |
<div id="map_canvas"></div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Google Mapathon 2013</title> | |
<meta content="en" http-equiv="content-language"> | |
<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.google.com/maps/api/js?v=3&sensor=false&language=en&key=AIzaSyDZ82d3j-OqU8JHoU8JSAz-gJFty9ERrao"></script> | |
<script type="text/javascript"> | |
$(document).on("pageinit", "#map_page", function() { | |
initialize(); | |
}); | |
$(document).on('click', '#submit', function(e) { | |
e.preventDefault(); | |
calculateRoute(); | |
}); | |
var directionDisplay, | |
directionsService = new google.maps.DirectionsService(), | |
map; | |
function initialize() | |
{ | |
directionsDisplay = new google.maps.DirectionsRenderer(); | |
var element = document.getElementById("map_canvas"); | |
var mapTypeIds = []; | |
for(var type in google.maps.MapTypeId) { | |
mapTypeIds.push(google.maps.MapTypeId[type]); | |
} | |
mapTypeIds.push("OSM"); | |
var map = new google.maps.Map(element, { | |
center: new google.maps.LatLng(22.989945,72.486778), | |
zoom: 11, | |
mapTypeId: "OSM", | |
mapTypeControlOptions: { | |
mapTypeIds: mapTypeIds | |
} | |
}); | |
map.mapTypes.set("OSM", new google.maps.ImageMapType({ | |
getTileUrl: function(coord, zoom) { | |
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; | |
}, | |
tileSize: new google.maps.Size(256, 256), | |
name: "OpenStreetMap", | |
maxZoom: 18 | |
})); | |
directionsDisplay.setMap(map); | |
directionsDisplay.setPanel(document.getElementById("directions")); | |
} | |
function calculateRoute() | |
{ | |
var selectedMode = $("#mode").val(), | |
start = $("#from").val(), | |
end = $("#to").val(); | |
if(start == '' || end == '') | |
{ | |
// cannot calculate route | |
$("#results").hide(); | |
return; | |
} | |
else | |
{ | |
var request = { | |
origin:start, | |
destination:end, | |
travelMode: google.maps.DirectionsTravelMode[selectedMode] | |
}; | |
directionsService.route(request, function(response, status) { | |
if (status == google.maps.DirectionsStatus.OK) { | |
directionsDisplay.setDirections(response); | |
$("#results").show(); | |
/* | |
var myRoute = response.routes[0].legs[0]; | |
for (var i = 0; i < myRoute.steps.length; i++) { | |
alert(myRoute.steps[i].instructions); | |
} | |
*/ | |
} | |
else { | |
$("#results").hide(); | |
} | |
}); | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<div data-role="page" id="map_page"> | |
<div data-role="header"> | |
<h1><a href="#">Google Mapathon 2013, Ahmedabad</h1> | |
</div> | |
<div data-role="content"> | |
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> | |
<div id="map_canvas" style="height:300px;"></div> | |
<div data-role="fieldcontain"> | |
<label for="from">From</label> | |
<input type="text" id="from" value="Ahmedabad, Gujarat"/> | |
</div> | |
<div data-role="fieldcontain"> | |
<label for="to">To</label> | |
<input type="text" id="to" value="Pune, Maharastra"/> | |
</div> | |
<div data-role="fieldcontain"> | |
<label for="mode" class="select">Transportation method:</label> | |
<select name="select-choice-0" id="mode"> | |
<option value="DRIVING">Driving</option> | |
<option value="WALKING">Walking</option> | |
<option value="BICYCLING">Bicycling</option> | |
</select> | |
</div> | |
<a data-icon="search" data-role="button" href="#" id="submit">Get directions</a> | |
</div> | |
<div id="results" style="display:none;"> | |
<div id="directions"></div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title> | |
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyDZ82d3j-OqU8JHoU8JSAz-gJFty9ERrao"></script> | |
<script> | |
var map; | |
var brooklyn = new google.maps.LatLng(22.989945,72.486778); | |
var MY_MAPTYPE_ID = 'custom_style'; | |
function initialize() { | |
var featureOpts = [ | |
{ | |
featureType: 'road', | |
elementType: 'geometry', | |
stylers: [ | |
{ hue: -45 }, | |
{ saturation: 100 } | |
] | |
}, | |
{ | |
featureType: 'landscape', | |
elementType: 'geometry', | |
stylers: [ | |
{ hue: '#000000' }, | |
{ saturation: 75 }, | |
{ lightness: -100} | |
] | |
} | |
]; | |
var mapOptions = { | |
zoom: 12, | |
center: brooklyn, | |
mapTypeControlOptions: { | |
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] | |
}, | |
mapTypeId: MY_MAPTYPE_ID | |
}; | |
map = new google.maps.Map(document.getElementById('map_canvas'), | |
mapOptions); | |
var styledMapOptions = { | |
name: 'Custom Style' | |
}; | |
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); | |
map.mapTypes.set(MY_MAPTYPE_ID, customMapType); | |
} | |
</script> | |
</head> | |
<body onload="initialize()"> | |
<div id="map_canvas" style="width: 640px; height: 480px;"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment