jmeisel/CitySDK Guide_Using Multiple Modules.html

## CitySDK Guide_Using Multiple Modules.html
<head>
        <script type="text/javascript"
                    src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization&signed_in=true">
        </script>

        <script src="jquery.js"></script>
        <script src="js/citysdk.js"></script>
        <script src="js/citysdk.census.js"></script>
        <script src="js/citysdk.farmersMarket.js"></script>
</head>

<body>
<div id="map-canvas" style="width: 200px; height: 200px"></div>
</body>

<script>
var apiKey, map;

var sdk = new CitySDK();
var census = sdk.modules.census;
var farmersMarket = sdk.modules.farmersMarket;

//We won't need API keys for just Geography.
census.enable("");

function clearMap() {
map.data.forEach(function(feature) {
map.data.remove(feature);
});
};

function runExample(id) {
clearMap();
var textarea = $('#' + id);

eval(textarea.val());
};

$(document).ready(
function() {
    var mapOptions = {
        center: { lat: 37, lng: -120},
        zoom: 6
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

    map.data.setStyle({
        fillColor: 'blue'
    });

    //County boundary request
    var countyRequest = {
        state: "CA",
        level: "county",
        sublevel: true,
        container: "state"
    };

    //Request the boundaries and attach them to the map
    census.GEORequest(countyRequest, function(response) {
        map.data.addGeoJson(response);
    });

    //Create a popup
    var popup = new google.maps.InfoWindow();

    //Attach a listener for when a user clicks on a boundary
    map.data.addListener('click', function(event) {
        var lat = event.feature.getProperty("CENTLAT");
        var lng = event.feature.getProperty("CENTLON");
        var name = event.feature.getProperty("NAME");

        var request = {
            "lat": lat,
            "lng": lng
        };

        farmersMarket.search(request, function(response) {
            var html = "<h3>" + name + "</h3><br/>";
            html+= "<ul>";
            response.results.forEach(function (market) {
                html+= "<li>" + market.marketname + "</li>";
            });
            html+= "</ul>";

            popup.setContent(html);
            popup.setPosition(event.latLng);
            popup.open(map);
        });
    });
}
);
</script>
	<head>
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization&signed_in=true">
	</script>

	<script src="jquery.js"></script>
	<script src="js/citysdk.js"></script>
	<script src="js/citysdk.census.js"></script>
	<script src="js/citysdk.farmersMarket.js"></script>
	</head>

	<body>
	<div id="map-canvas" style="width: 200px; height: 200px"></div>
	</body>

	<script>
	var apiKey, map;

	var sdk = new CitySDK();
	var census = sdk.modules.census;
	var farmersMarket = sdk.modules.farmersMarket;

	//We won't need API keys for just Geography.
	census.enable("");

	function clearMap() {
	map.data.forEach(function(feature) {
	map.data.remove(feature);
	});
	};

	function runExample(id) {
	clearMap();
	var textarea = $('#' + id);

	eval(textarea.val());
	};

	$(document).ready(
	function() {
	var mapOptions = {
	center: { lat: 37, lng: -120},
	zoom: 6
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	map.data.setStyle({
	fillColor: 'blue'
	});

	//County boundary request
	var countyRequest = {
	state: "CA",
	level: "county",
	sublevel: true,
	container: "state"
	};

	//Request the boundaries and attach them to the map
	census.GEORequest(countyRequest, function(response) {
	map.data.addGeoJson(response);
	});

	//Create a popup
	var popup = new google.maps.InfoWindow();

	//Attach a listener for when a user clicks on a boundary
	map.data.addListener('click', function(event) {
	var lat = event.feature.getProperty("CENTLAT");
	var lng = event.feature.getProperty("CENTLON");
	var name = event.feature.getProperty("NAME");

	var request = {
	"lat": lat,
	"lng": lng
	};

	farmersMarket.search(request, function(response) {
	var html = "<h3>" + name + "</h3><br/>";
	html+= "<ul>";
	response.results.forEach(function (market) {
	html+= "<li>" + market.marketname + "</li>";
	});
	html+= "</ul>";

	popup.setContent(html);
	popup.setPosition(event.latLng);
	popup.open(map);
	});
	});
	}
	);
	</script>