|
Largest Cities in North and Central America |
<style>
body{
padding:20px
}
#map-canvas, #side-bar {
height: 500px;
width: 600px;
}
pre {
border:1px solid #D6E0F5;
padding:5px;
margin:5px;
background:#EBF0FA;
}
table {
border-collapse: collapse;
}
td{ border: 1px solid #B0B0B0;
padding: 5px;
background-color: #F8F8F8 ;
}
#side_bar{
width:400px;
}
br {
display: block;
margin: 3px 0;
}
em{
font-size:105%;
font-weight: bold;
}
/* fix for unwanted scroll bar in InfoWindow */
.scrollFix {
line-height: 1.35;
overflow: hidden;
white-space: nowrap;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
"use strict";
$( document ).ready(function() {
// this variable will collect the html which will be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
var gmarkers = [];
// info windows
var infoWnd = new google.maps.InfoWindow();
// A function to create the marker and set up the event window
// this example use a small blue circle icon instead of default red marker
function createMarker(markerNo, point, city, country, population, newBreak) {
var marker = new google.maps.Marker({
position : point,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
strokeColor: "#0033CC"
},
});
// add listener on marker.
google.maps.event.addListener(marker, "click", function() {
infoWnd.setContent('<div class="scrollFix">' + city +", " + country + "<br/> Population: " + population + '</div>');
infoWnd.open(marker.getMap(), marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add city link in the sidebar. Use HTML 5 data attributes is used to store marker number
side_bar_html = newBreak + " <a href='#' class='myclass' data-marker="+markerNo+">" + city + "<\/a> ";
$("#side_bar").append(side_bar_html);
return marker;
}
// create the map
var map;
function initialize() {
var mapOptions = {
zoom : 6,
center : new google.maps.LatLng(40.9639, -76.888),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var lastCountry; // country associated with previous city
var newBreak; // text to show on each new country
// iterrate through all cities in object
for(var i=0 ; i < $(cities.myCities).length ; i++){
var thisCity = cities.myCities[i]
// create a LatLng object representing a geographic point
var point = new google.maps.LatLng(thisCity.lat, thisCity.lng);
// add name of country on each new country
newBreak = "";
if (thisCity.country != lastCountry){
newBreak = "<br/><br/><em>" +thisCity.country + "</em> ";
}
lastCountry = thisCity.country;
// create marker
var marker = createMarker(i, point, thisCity.city, thisCity.country, thisCity.pop,newBreak);
// Renders the marker on the specified map
marker.setMap(map);
}
}
// aqdd listener on click event for city names in side bar;
$("#side_bar").on( "click", "a", function(event) {
var thisMarker = $(this).data('marker');
google.maps.event.trigger(gmarkers[thisMarker], "click");
return false;
});
google.maps.event.addDomListener(window, 'load', initialize);
var cities = {"myCities":[
{"country":"Canada","city":"Toronto","pop":"2,795,060","lat":"43.653226","lng":"-79.383184"},
{"country":"Canada","city":"Montreal","pop":"1,649,519","lat":"45.50867","lng":"-73.553992"},
{"country":"Canada","city":"Calgary","pop":"1,149,552","lat":"51.045325","lng":"-114.058101"},
{"country":"Canada","city":"Ottawa","pop":"883,391","lat":"45.42153","lng":"-75.697193"},
{"country":"Canada","city":"Edmonton","pop":"877,926","lat":"53.544389","lng":"-113.490927"},
{"country":"Canada","city":"Mississauga","pop":"713,443","lat":"43.589045","lng":"-79.64412"},
{"country":"Canada","city":"Winnipeg","pop":"663,617","lat":"49.899754","lng":"-97.137494"},
{"country":"Cuba","city":"Havana","pop":"2,106,146","lat":"23.05407","lng":"-82.345189"},
{"country":"Dominican Republic","city":"Santo Domingo","pop":"1,484,789","lat":"18.466667","lng":"-69.95"},
{"country":"Guatemala","city":"Guatemala City","pop":"1,110,100","lat":"14.613333","lng":"-90.535278"},
{"country":"Haiti","city":"Port au Prince","pop":"942,194","lat":"18.533333","lng":"-72.333333"},
{"country":"Honduras","city":"Tegucigalpa","pop":"1,126,534","lat":"14.0833","lng":"-87.2167"},
{"country":"Honduras","city":"San Pedro Sula","pop":"646,300","lat":"15.5","lng":"-88.033333"},
{"country":"Mexico","city":"Mexico City","pop":"8,555,500","lat":"19.432608","lng":"-99.133208"},
{"country":"Mexico","city":"Ecatepec de Morelos","pop":"1,742,000","lat":"19.601841","lng":"-99.050674"},
{"country":"Mexico","city":"Guadalajara","pop":"1,500,800","lat":"20.659699","lng":"-103.349609"},
{"country":"Mexico","city":"Puebla","pop":"1,498,300","lat":"19.410178","lng":"-99.082683"},
{"country":"Mexico","city":"Juárez","pop":"1,398,400","lat":"19.426753","lng":"-99.161845"},
{"country":"Mexico","city":"Tijuana","pop":"1,386,100","lat":"32.511913","lng":"-117.040423"},
{"country":"Mexico","city":"León","pop":"1,277,700","lat":"21.125008","lng":"-101.68596"},
{"country":"Mexico","city":"Monterrey","pop":"1,173,600","lat":"25.644902","lng":"-100.295772"},
{"country":"Mexico","city":"Nezahualcóyotl","pop":"1,158,100","lat":"19.4","lng":"-98.988889"},
{"country":"Mexico","city":"Chihuahua","pop":"887,600","lat":"28.764465","lng":"-106.1184"},
{"country":"Mexico","city":"Naucalpan","pop":"835,200","lat":"19.483333","lng":"-99.233333"},
{"country":"Mexico","city":"Mérida","pop":"827,000","lat":"20.966044","lng":"-89.627433"},
{"country":"Mexico","city":"Hermosillo","pop":"778,000","lat":"19.347487","lng":"-99.128321"},
{"country":"Mexico","city":"Aguascalientes","pop":"766,400","lat":"21.860492","lng":"-102.27983"},
{"country":"Mexico","city":"Saltillo","pop":"762,200","lat":"25.426724","lng":"-100.995425"},
{"country":"Mexico","city":"SanLuisPotosí","pop":"761,700","lat":"21.804926","lng":"-100.930551"},
{"country":"Mexico","city":"Culiacán","pop":"743,200","lat":"24.805249","lng":"-107.383432"},
{"country":"Mexico","city":"Mexicali","pop":"730,800","lat":"32.624539","lng":"-115.452262"},
{"country":"Mexico","city":"Cancún","pop":"722,800","lat":"21.161908","lng":"-86.851528"},
{"country":"Mexico","city":"Acapulco","pop":"708,100","lat":"16.863611","lng":"-99.8825"},
{"country":"Mexico","city":"Guadalupe","pop":"690,600","lat":"19.220962","lng":"-99.125554"},
{"country":"Mexico","city":"Chimalhuacán","pop":"688,800","lat":"19.430401","lng":"-98.957657"},
{"country":"Mexico","city":"Tlalnepantla","pop":"682,200","lat":"19.534528","lng":"-99.190736"},
{"country":"Mexico","city":"Torreón","pop":"651,100","lat":"25.542844","lng":"-103.406786"},
{"country":"Mexico","city":"Reynosa","pop":"649,800","lat":"26.013108","lng":"-98.278054"},
{"country":"Mexico","city":"Santiagode Querétaro","pop":"642,100","lat":"20.588793","lng":"-100.389888"},
{"country":"Nicaragua","city":"Managua","pop":"927,087","lat":"12.136389","lng":"-86.251389"},
{"country":"USA","city":"New York City","pop":"8,405,837","lat":"40.712784","lng":"-74.005941"},
{"country":"USA","city":"Los Angeles","pop":"3,884,307","lat":"34.052234","lng":"-118.243685"},
{"country":"USA","city":"Chicago","pop":"2,718,782","lat":"41.878114","lng":"-87.629798"},
{"country":"USA","city":"Houston","pop":"2,195,914","lat":"29.760193","lng":"-95.36939"},
{"country":"USA","city":"Philadelphia","pop":"1,553,165","lat":"39.952335","lng":"-75.163789"},
{"country":"USA","city":"Phoenix","pop":"1,513,367","lat":"33.448377","lng":"-112.074037"},
{"country":"USA","city":"SanAntonio","pop":"1,409,019","lat":"29.424122","lng":"-98.493628"},
{"country":"USA","city":"SanDiego","pop":"1,355,896","lat":"32.715738","lng":"-117.161084"},
{"country":"USA","city":"Dallas","pop":"1,257,676","lat":"32.78014","lng":"-96.800451"},
{"country":"USA","city":"SanJose","pop":"998,537","lat":"37.339386","lng":"-121.894955"},
{"country":"USA","city":"Austin","pop":"885,400","lat":"30.267153","lng":"-97.743061"},
{"country":"USA","city":"Indianapolis","pop":"843,393","lat":"39.768403","lng":"-86.158068"},
{"country":"USA","city":"Jacksonville","pop":"842,583","lat":"30.332184","lng":"-81.655651"},
{"country":"USA","city":"San Francisco","pop":"837,442","lat":"37.77493","lng":"-122.419416"},
{"country":"USA","city":"Columbus","pop":"822,553","lat":"39.961176","lng":"-82.998794"},
{"country":"USA","city":"Charlotte","pop":"792,862","lat":"35.227087","lng":"-80.843127"},
{"country":"USA","city":"FortWorth","pop":"792,727","lat":"32.755488","lng":"-97.330766"},
{"country":"USA","city":"Detroit","pop":"688,701","lat":"42.331427","lng":"-83.045754"},
{"country":"USA","city":"Seattle","pop":"652,405","lat":"47.60621","lng":"-122.332071"},
{"country":"USA","city":"Denver","pop":"649,495","lat":"39.737567","lng":"-104.984718"}
]};
});
</script>
<a href="../index.php">BACK</a>
<br/>
<h3>Re-positioning the map</h3>
<ul>
<li>Click on city to move map</li>
</ul>
<table><tr>
<td>
<div id="map-canvas"></div>
</td>
<td style='vertical-align:top;'>
<p><em>Largest Cities in North and Central America</em></p>
<div id="side_bar"></div>
</td>
</tr></table>