In this example, I will demonstrate how to create a covered area on a Map for specific scenarios something like where you need highlight the area based on the population, computer literacy, education...Etc. eg: You can change the size of the circle by covering the countries based on the highest population in the world. This article is more focusing on creating circles on Google Map Version 3. Creating a Polygon will be discussed in later article. Let's have a look on circle first,
Creating a Circle on the Map for given radius.
Follow these code snippets to create a circle and will create a marker on the center point of the circle. Read the code comments and API reference for more information. First I will create a map container within the body tag
<body> <div id="divMap" style="width:600px; height:600px; border:1px #000 solid"></div> </body>
Step 01 -:- Creating a map.
var divMap = document.getElementById('divMap'); // get the id of the map container.
var mapOptions =
{
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP,
center : new google.maps.LatLng(6.91752, 79.858246)
}
googleMap = new google.maps.Map(divMap, mapOptions);
var circleOptions =
{
center : new google.maps.LatLng(6.91752, 79.858246),
fillColor : '#FF6803',
fillOpacity : 0.25, // The stroke opacity between 0.0 and 1.0
map : googleMap,
radius : 100000, // The radius in meters on the Earth's surface
strokeColor : '#755037', // All CSS3 colors are supported except
// for extended named colors.
storkeWeight : 1, // The stroke width in pixels.
strokeOpacity : 0.85 // The stroke opacity between 0.0 and 1.0
}
var circle = new google.maps.Circle(circleOptions); // Create a new circle for given circle options
Step 03 -:- Creating a maker & infowindow on the center point.
I have used custom marker image to set the center point of the circle. For that, I have used
MarkerImage Class by passing parameters to the constructor of the google.maps.MarkerImage class. Except the url parameter, you can pass null to the constructor like in below example.var marker = new google.maps.Marker(
{
position : new google.maps.LatLng(6.91752, 79.858246),
icon : new google.maps.MarkerImage("http://www.google.com/mapfiles/markerC.png",
null, null, null, null),
map : googleMap
});
var infowindow = new google.maps.InfoWindow(
{
content : 'Colombo, Sri Lanka.'
});
infowindow.open(googleMap, marker);
That's all. We are done. Here is the full code snippet in
Init function. Using the adddomListener i'm initializing the function on the document.<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" language="javascript">
var googleMap ;
function Init()
{
var divMap = document.getElementById('divMap'); // get the id of the map container.
var mapOptions =
{
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP,
center : new google.maps.LatLng(6.91752, 79.858246)
}
googleMap = new google.maps.Map(divMap, mapOptions);
var circleOptions =
{
center : new google.maps.LatLng(6.91752, 79.858246),
fillColor : '#FF6803',
fillOpacity : 0.25, // The stroke opacity between 0.0 and 1.0
map : googleMap,
radius : 100000, // The radius in meters on the Earth's surface
strokeColor : '#755037', //All CSS3 colors are supported except for extended named colors.
storkeWeight : 1, // The stroke width in pixels.
strokeOpacity : 0.85 // The stroke opacity between 0.0 and 1.0
}
var circle = new google.maps.Circle(circleOptions); // Create a new circle for given circle options
var marker = new google.maps.Marker(
{
position : new google.maps.LatLng(6.91752, 79.858246),
icon : new google.maps.MarkerImage("http://www.google.com/mapfiles/markerC.png",
null, null, null, null),//google.maps.MarkerImage class
map : googleMap
});
var infowindow = new google.maps.InfoWindow(
{
content : 'Colombo, Sri Lanka.'
});
infowindow.open(googleMap, marker);
}
google.maps.event.addDomListener(window, 'load', Init);
</script>
Output
No comments:
Post a Comment