JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<div id="ft_data"></div>
CSS
#map_canvas { width: 500px;height: 400px; }
JavaScript
var mapNoConflict = jQuery;
var map;
var latlng = new google.maps.LatLng(43.10599621690524, -89.38682556152344);
var citymap = [];
var cityCircle;
//begin main function
mapNoConflict(document).ready(function() {
//queries fusion table for data and builds array
getCityData();
});
//end main function
function getCityData() {
//get city data from fusion table and parse
mapNoConflict.getJSON('http://tables.googlelabs.com/api/query?sql=SELECT * FROM 3688014 &jsonCallback=?', function(data) {
var cityNameColumn = 0;
var cityLatLngColumn = 1;
var cityFormulaColumn = 6;
for (var i = 0; i < data.table.rows.length; i++) {
var row = data.table.rows[i];
var cityLatLngRaw = row[cityLatLngColumn];
var commaPos = cityLatLngRaw.indexOf(',');
var lat = parseFloat(cityLatLngRaw.substring(0, commaPos));
var lng = parseFloat(cityLatLngRaw.substring(commaPos + 2, cityLatLngRaw.length));
//alert('lat: "' + lat + '", lng: "' + lng + '"');
citymap[parseInt(i)] = {
'center': new google.maps.LatLng(lat, lng),
'formula': parseFloat(row[cityFormulaColumn]),
'name': row[cityNameColumn]
}
}
createMap();
});
//end json query
}
//end data function
function createMap() {
var options = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
draggable: true,
mapTypeControl: false,
navigationControl: true,
streetViewControl: false,
panControl: false,
scaleControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
}
};
//write the map
var map = new...