Sized Markers

Markers can be sized according to values you choose. This could be a useful tool for pin-pointing populations on a map and showing their size relative to other populations that are on the map as well.

Try it here as a Google Gadget:

HTML and JavaScript Google Gadget xml

HTML and JavaScript as used on a server:

<html>

<head>

<title>Google Maps JavaScript API v3 Example: Simple Icons</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(){

for (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 a random size between 0 and 30 for each marker

var scale = Math.floor(Math.random()*20+10);

var markerSize =new google.maps.Size(scale,scale);

// create a MarkerImage instance using a red balloon image with the randomly chosen size

var pic = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_red.png',

markerSize, new google.maps.Point(0,0), new google.maps.Point(scale,scale),

markerSize);

// create a Marker instance at the random position using the MarkerImage instance

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

}

</script>

</head>

</body>

</html>

Google Gadget xml

XML nodes and CDATA are added at the start and end of the file, as is registerLoadHandler (in bold). The HTML tags html, head, and body are removed, as are meta and title. The remaining html (one div tag in this example) is listed as the first line in the CDATA section. The Google Maps JavaScript reference and my JavaScript follow the HTML.

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="Simple Google Maps Sized Marker Example" height="300"

description="Simple Google Maps Sized Marker Example"

author="Stephanie Smullen" author_email="stephanie.smullen@gmail.com">

<Require feature="sharedmap"/>

</ModulePrefs>

<Content type="html">

<![CDATA[