Here is the example where various functionalities like styles (StyledMapType), info window, marker events, etc, have been implemented
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div#map_container{
width:50%;
height:250px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function loadMap()
{
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#F5DA81" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 50 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
// Declare a new StyledMapType object and passing it the array of styles and the name that has to be displayed on the map-type control.
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = 21.7679;
var longitude = 78.8718;
var zoom = 7;
var LatLng = new google.maps.LatLng(latitude, longitude);
// Create a map object and include the MapTypeId to add it to the map type control
var mapOptions = { zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] }
}
var map = new google.maps.Map(document.getElementById('map_container'),mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
//Defining the string that has to be shown in info window
var contentString ="abcdefgh";
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true,
animation: google.maps.Animation.DROP,
});
//To set the marker according to the position clicked
google.maps.event.addListener(map, 'click', function(map){
var latLng = map.latLng;
//alert(latLng);
marker.setPosition(latLng);
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
//Implementing info window
var infowindow = new google.maps.InfoWindow({
content: contentString });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="loadMap()">
<div id="map_container"></div>
<div id="map_info">
<input type="text" id="latitude" placeholder="latitude">
<input type="text" id="longitude" placeholder="longitude">
</div>
</body>
</html>
0 Comment(s)