Point Mashups Peterson

Icons

Info Marker

Random Points

Random Point Calculation

var map; function initialize() { var myLatlng = new google.maps.LatLng( , ); var myOptions = { zoom: 18, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Define bounding box for random points var southWest = new google.maps.LatLng(41.12,-96.50); var northEast = new google.maps.LatLng(41.39, ); var bounds = new google.maps.LatLngBounds(southWest,northEast); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); // Add 5 markers to the map at random locations for (var i = 0; i < 5; i++) { var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); var j=i+1; var image = 'NumberedMarkers/largeTDRedIcons/marker' + j + ".png"; var marker = new google.maps.Marker({ position: location, icon: image, map: map }); var j = i + 1; marker.setTitle(j.toString()); attachMessage(marker, i);

Points in XML file

XML File

function initialize() { // create the map var myOptions = { zoom: 9, center: new google.maps.LatLng(44.96,-93.24), mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Read the data from example.xml downloadUrl("example.xml", function(doc) { var xmlDoc = xmlParse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new google.maps.LatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); // create the marker var marker = createMarker(point,label,html); } // put the assembled side_bar_html contents into the side_bar div document.getElementById("side_bar").innerHTML = side_bar_html; }); }

Really Simple Syndication (RSS) function initialize() { // Center and zoom level are re-defined later based on points in georss feed var myLatlng = new google.maps.LatLng( , ); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var georssLayer = new n-us&format=feed-georss'); georssLayer.setMap(map);

Flickr Map

RSS Earthquakes

Google FusionTables function initialize() { var chicago = new google.maps.LatLng( , ); map = new google.maps.Map(document.getElementById('map_canvas'), { center: chicago, zoom: 11, mapTypeId: 'roadmap' }); // View this table in a webpage: layer = new google.maps.FusionTablesLayer(139529); layer.setMap(map);

Chicago Crime

Fusion Table Query function initialize() { var chicago = new google.maps.LatLng(41.968, ); map = new google.maps.Map(document.getElementById('map_canvas'), { center: chicago, zoom: 10, mapTypeId: 'roadmap' }); // Select stops along the Red Line that had weekday ridership above a certain value layer = new google.maps.FusionTablesLayer(198945, { query: "SELECT address FROM WHERE ridership > 2000"} ); layer.setMap(map); }

Geocoding var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng( , ); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); }

Geocoder Marker

Homicides

Circle function From maps.google.circleoverlay.js // Create polygon points (extra point to close polygon) for (var i = 0; i < this.numPoints + 1; i++) { // Convert degrees to radians var theta = Math.PI * (i / (this.numPoints / 2)); var vertexLat = this.latLng.lat() + (circleLat * Math.sin(theta)); var vertexLng = this.latLng.lng() + (circleLng * Math.cos(theta)); var vertextLatLng = new google.maps.LatLng(vertexLat, vertexLng); circleLatLngs.push(vertextLatLng);

Graduated Symbols var map = null; function load() { // Create Map var center = new google.maps.LatLng(37.760, ); map = new google.maps.Map(document.getElementById("map"), { center: center, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Draw the outside circle var circle1 = new CircleOverlay(map, map.getCenter(), 100, "#000000", 1, 1, '#009900', 0.25,100); // Draw the middle circle var circle2 = new CircleOverlay(map, map.getCenter(), 50, "#0000FF", 1, 1, '#0000FF', 0.25,100); // Draw the inside circle var circle3 = new CircleOverlay(map, map.getCenter(), 25, "#FF0000", 1, 1, '#FF0000', 0.25,100); }

Overlapping Circles

User-adjustable Circles

Circles?

Thick lines

Symbol Overlap