Drop Down to Change Between satellite and Street view using gmap3 jQuery Plugin:
Gmaps3 Plugin Provides us mapTypeControlOptions to change between the satellite view and street view in google maps which is demonstrated in this post , initially when the map is loaded the maps loads in satellite which is done is using static mapTypeId : 'google.maps.MapTypeId.SATELLITE' and then using map type control options drop down the view can be changed :
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
<html>
<head>
<script type="text/javascript"
src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript"
src="../gmap3.js"></script>
<style>
.gmap3 {
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 1000px;
height: 500px;
}
</style>
<script type="text/javascript">
$(function(){
$('#test1').gmap3({
action: 'init',
options:{
center:[22.49156846196823,
89.75802349999992],
zoom:2,
mapTypeId:
google.maps.MapTypeId.SATELLITE,
mapTypeControl: true,
mapTypeControlOptions: {
style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
streetViewControl: true
}
});
});
</script>
</head>
<body>
<div
id="test1" class="gmap3"></div>
</body>
</html>
