Playground: Testing Google Maps API on JSFiddle |

by vijayweb

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
Google Maps Example taken from http://code.google.com/intl/en/apis/visualization/documentation/gallery/map.html

<div id="map_div" style="width: 400px; height: 300px"></div>

CSS

map_div {
    width: 300px;
    height: 300px;
}

JavaScript

// students object is already defined from the CourseInfo.js file 
console.log(google);
// generate map for countries
google.load("visualization", "1", {
    packages: ["map"]
});
google.setOnLoadCallback(drawMap);

function drawMap() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Lat');
    data.addColumn('number', 'Lon');
    data.addColumn('string', 'Name');
    data.addRows(4);
    data.setCell(0, 0, 37.4232);
    data.setCell(0, 1, -122.0853);
    data.setCell(0, 2, 'Work');
    data.setCell(1, 0, 37.4289);
    data.setCell(1, 1, -122.1697);
    data.setCell(1, 2, 'University');
    data.setCell(2, 0, 37.6153);
    data.setCell(2, 1, -122.3900);
    data.setCell(2, 2, 'Airport');
    data.setCell(3, 0, 37.4422);
    data.setCell(3, 1, -122.1731);
    data.setCell(3, 2, 'Shopping');

    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, {
        showTip: true
    });
}