I'm a mediocre programmer at best and am pretty terrible at JavaScript. But I have been tasked with creating a Google Maps application. This application is driven by a dynamic report with a Java layer on top of it. This Java layer spits out generated Google API JavaScript.
The problem I am running into is that I am attempting to plot a huge number of markers. I am already investigating how to set the markers map to null using AJAX. But I am wondering if someone could look at this code and tell me if anything is redundant. When my application is not restricted it could easily spit out 1000 of each of these blocks, which results in a ton of JavaScript.
Below is a sample run of my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>txtMark</title>
<style>
#map-canvas {
height: 500px;
width: 500px;
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var txtMark = {};
var circles = {};
var balloons = {};
var highPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000';
var lowPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00';
var medPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569';
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(38.873555, -77.295380),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
circles[0] = {
center: new google.maps.LatLng(38.873555, -77.295380),
id: 0,
addr: '00601',
r: 16093.4,
txt: '00601: Claims With Labor:322',
color: '#FE7569'
};
balloons[0] = {
center: new google.maps.LatLng(38.873555, -77.295380),
id: 0,
pin: lowPin,
addr: '00601',
txt: '00601: Claims With Part And Labor:139'
};
txtMark[0] = {
center: new google.maps.LatLng(38.873555, -77.295380),
id: 0,
style: 'FE7569',
addr: '139',
txt: '00601: Claims With Part Only:139'
};
var tInfo = new google.maps.InfoWindow();
for (i in txtMark) {
var tMark = new MarkerWithLabel({
position: txtMark[i].center,
map: map,
labelClass: "labels",
labelStyle: {
color: txtMark[i].style
},
labelContent: txtMark[i].addr,
icon: {}
});
google.maps.event.addListener(tMark, 'click', (function (tMark, i) {
return function () {
if (tInfo) {
infoWindow.close();
tInfo.close();
bInfo.close();
}
tInfo.setContent(txtMark[i].txt);
tInfo.setPosition(txtMark[i].center);
tInfo.open(map);
}
})(tMark, i));
}
var bMarker;
var bInfo = new google.maps.InfoWindow();
for (i in balloons) {
var balloonOptions = {
map: map,
id: balloons[i].id,
position: balloons[i].center,
icon: balloons[i].pin,
infoWindowIndex: i
};
bMarker = new google.maps.Marker(balloonOptions);
google.maps.event.addListener(bMarker, 'click', (function (bMarker, i) {
return function () {
if (bInfo) {
infoWindow.close();
tInfo.close();
bInfo.close();
}
bInfo.setContent(balloons[i].txt);
bInfo.setPosition(balloons[i].center);
bInfo.open(map);
}
})(bMarker, i));
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow();
for (i in circles) {
var magnitudeOptions = {
strokeColor: circles[i].color,
fillColor: circles[i].color,
map: map,
center: circles[i].center,
radius: circles[i].r,
id: circles[i].id,
addr: circles[i].addr,
infoWindowIndex: i
};
cityCircle = new google.maps.Circle(magnitudeOptions);
google.maps.event.addListener(cityCircle, 'click', (function (cityCircle, i) {
return function () {
if (infoWindow) {
infoWindow.close();
tInfo.close();
bInfo.close();
}
infoWindow.setContent(circles[i].txt);
infoWindow.setPosition(cityCircle.getCenter());
infoWindow.open(map);
}
})(cityCircle, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize)
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
circles[0]
,circles[1]
, …circles[999]
as well as manyballoons[]
andtxtMark[]
? Do theballoons[]
andtxtMark[]
always coincide in location? \$\endgroup\$circles[0]
is not in the same location asballoons[0]
andtxtMark[0]
? \$\endgroup\$