Google maps with bubbles and labels

by Angelos Chaidas

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<div id="map"></div>

CSS

body {
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
}
.infoBox {
    white-space:nowrap;
    width:80px;
    font-size:18px;
    font-weight:bold;
    color:white;
    line-height:20px;
    padding:0;
    text-align:center;
    color:white;
    text-shadow:0 0 4px black;
    /*background-color:black;*/
}

.infoBox span {
    font-size:11px;
    font-weight:normal;
    line-height:14px;
    display:block;
}

#map {
    width:640px;
    height:400px;
    background-color:#EFEFEF;
}

JavaScript

var map, map_options, map_center;
var circles = [];
var labels = [];
var loc = [{
    "id": 1,
    "label": "London",
    "lat": 51.803378,
    "lng": -0.139134,
    "count": 111226},
{
    "id": 2,
    "label": "South East",
    "lat": 50.8,
    "lng": -0.605907,
    "count": 62681},
{
    "id": 3,
    "label": "East",
    "lat": 52.5,
    "lng": 1,
    "count": 27568},
{
    "id": 4,
    "label": "North West",
    "lat": 53.954491,
    "lng": -2.749077,
    "count": 24006},
{
    "id": 5,
    "label": "South West",
    "lat": 50.950482,
    "lng": -3.230444,
    "count": 23262},
{
    "id": 6,
    "label": "W.Midlands",
    "lat": 52.509745,
    "lng": -2.355658,
    "count": 22785},
{
    "id": 7,
    "label": "E.Midlands",
    "lat": 52.934907,
    "lng": -0.846093,
    "count": 19572},
{
    "id": 8,
    "label": "Yorkshire",
    "lat": 53.679185,
    "lng": -1.162449,
    "count": 19240},
{
    "id": 9,
    "label": "Scotland",
    "lat": 56.79918,
    "lng": -4.254873,
    "count": 15703},
{
    "id": 10,
    "label": "North East",
    "lat": 54.5721,
    "lng": -1.514363,
    "count": 6557},
{
    "id": 11,
    "label": "Wales",
    "lat": 52.195902,
    "lng": -3.747508,
    "count": 4303},
{
    "id": 12,
    "label": "N.Ireland",
    "lat": 54.388189,
    "lng": -7.388242,
    "count": 2577},
{
    "id": 13,
    "label": "Channel Isles",
    "lat": 49.337192,
    "lng": -2.317139,
    "count": 159},
{
    "id": 14,
    "label": "Isle Of Man",
    "lat": 54.146652,
    "lng": -4.466164,
    "count": 25}
];

$(document).ready(function() {

    // Create the map
    map_center = new google.maps.LatLng(51.50487147437787, -0.14110620117186112);
    map_options = {
        zoom: 6,
        disableDefaultUI: true,
        scrollwheel: false,
        minZoom: 6,
        maxZoom: 7,
        zoomControl: false,
        keyboardShortcuts: false,
        center: map_center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new...