Colored Markers

Colored markers are another useful tool. While a sized marker might be used to show relative population size, a colored marker could be used to show diverse populations.

Try it here as a Google Gadget:

HTML and JavaScript for a server. See the Sized Markers page for directions to convert this file to a Google Gadget xml file.

<html>

<head>

<title>Colored Markers</title>

function initialize() {

// set center of map to chosen location -- 40, -90 is central North America

var myLatlng = new google.maps.LatLng(40, -90);

// choose zoom level, center, map type and create a Map instance (global since var keyword not used)

var myOptions = {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID };

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// create markers for the map

createMarker();

}

function createMarker(){

// create an array (pics) with the urls for 10 different colored balloons

var pics = [ 'http://labs.google.com/ridefinder/images/mm_20_red.png',

'http://labs.google.com/ridefinder/images/mm_20_yellow.png',

'http://labs.google.com/ridefinder/images/mm_20_green.png',

'http://labs.google.com/ridefinder/images/mm_20_blue.png',

'http://labs.google.com/ridefinder/images/mm_20_purple.png',

'http://labs.google.com/ridefinder/images/mm_20_orange.png',

'http://labs.google.com/ridefinder/images/mm_20_brown.png',

'http://labs.google.com/ridefinder/images/mm_20_white.png',

'http://labs.google.com/ridefinder/images/mm_20_gray.png',

'http://labs.google.com/ridefinder/images/mm_20_black.png'];

for (var i=0;i<20;i++){

// choose a random latitude (30 to 46) and longitude (-80 to -121)

var randLat=Math.floor(Math.random()*16+30);

var randLong=(-1)*Math.floor(Math.random()*41+80);

var latlng = new google.maps.LatLng(randLat, randLong);

// choose one of the balloon pics (0-9), chance of 10 very small

var randPic=Math.floor(Math.random()*10);

var pic = new google.maps.MarkerImage(pics[randPic]);

// create a Marker instance at the random position using the selected pic

var marker = new google.maps.Marker({position: latlng, map: map, icon: pic});

}

</script>

</head>

</body>

</html>