Aruna Nishantha's blogspot: Google Map

Thursday, August 23, 2012

How to create an area (circle/polygon) on a Google map 3

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);

Monday, August 20, 2012

Create, Remove Markers and Info Windows on Google Map V 3

In this article, it describes how to add, remove markers and info windows on the Google Map version 3. Unlike in version 2, this has lots of easy ways of implementing map options, markers, info windows and associate controls on the map. You can set zoom control & control types, street view controls in map options. I'll break down the steps as follows,

Initialize the Map control and register with web page.
Create markers and associate info windows. Create a function to remove the markers from the map.
Maker events demo.

Here we go -:-

Step 01

Add below script within your head tag.

<head>
<title>Step 01</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

var divMapID;
function Init() {
     divMapID = document.getElementById('divMap');
    // google.maps.MapOptions object
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(42.345573, -71.098326),
        zoom: 11, // This is required to set the zoom level when the map is loaded to the page.
        zoomControl: true,// override default styles
        zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, 
        mapTypeControl: true,// override default styles
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, 
        overviewMapControl: true,// By Default it is closed.
        overviewMapControlOptions: { opened: true}
    }
    // google.maps.Map class and for constructor -> Map(mapDiv:Node, opts?:MapOptions)
    var googleMap = new google.maps.Map(divMapID, mapOptions);
}
// Register the init function with domlistener 
google.maps.event.addDomListener(window, 'load', Init);
</script>
</head>

Add below markup to load the map

<div id="divMap" style="width: 500px; height: 500px; border: 1px #000 solid"></div>