• Home
• About Bradley Beard
• Brainstorm Multimedia
• Music

Editing Google Maps using JavaScript

I just finished a rather tough piece of JavaScript for a new customer. Let me explain what they wanted… they had a map made from the Google API. I didn’t know it, but these maps are generated basically by a giant <script> dynamically. On this map, there were a number of companies that my customer does business with. Well, inevitably, one of the companies went out of business, so they wanted to have the company removed from the Google Map.

Originally, the code looked like this:

<script type=”text/javascript”>
//<![CDATA[
var i = 0;
var gmarkers = [];
var mtypes = [];
var map;

function toggleset(obj, mtype) {
var j;
for(j=0;j<i;j++) {
if(mtypes[j]==mtype) {
if(obj.checked) {
map.addOverlay(gmarkers[j]);
} else {
map.removeOverlay(gmarkers[j]);
}
}
}
}

function load() {
if (GBrowserIsCompatible()) {
function createMarker(point, title, details, icontype, typeid) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(”<div style=’color: black; width: 250px; overflow: auto;’><b>” + title + “</b><br>” + details + “</div>”);
});

gmarkers[i] = marker;
mtypes[i] = typeid;
i++;
return marker;
}

map = new GMap2(document.getElementById(”map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(29.78, -98.08), 10);
map.setMapType(G_HYBRID_TYPE);
var icon = new GIcon();
var HQicon = new GIcon();
var UNIVicon = new GIcon();
var TOP10icon = new GIcon();

GDownloadUrl(”index.php?module=base&page=mapdata”, function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName(”marker”);
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute(”lat”)),
parseFloat(markers[i].getAttribute(”lng”)));
map.addOverlay(createMarker(point,
markers[i].getAttribute(”title”),
markers[i].getAttribute(”details”),
markers[i].getAttribute(”icontype”),
markers[i].getAttribute(”typeid”)));
}
});
}
}
//]]>
</script>

Geez, that’s ugly! Well, after going through it a bit, I saw the line

markers[i].getAttribute(”title”)

and thought, “hmmm… I wonder if I can capture the name of the company and shortcut it before the marker is set?”

With that, I got working on this JavaScript. I was tearing it apart and alerting everything I could. I finally wrapped it in with a quick conditional, and what do you know - it worked first time. Gotta love it when a plan comes together!

Here’s how I did it…

I changed the section

for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute(”lat”)),
parseFloat(markers[i].getAttribute(”lng”)));
map.addOverlay(createMarker(point,
markers[i].getAttribute(”title”),
markers[i].getAttribute(”details”),
markers[i].getAttribute(”icontype”),
markers[i].getAttribute(”typeid”)));
}

so that it would look like

for (var i = 0; i < markers.length; i++) {
if(markers[i].getAttribute(”title”)!== ‘Name of the company goes here’) {
var point = new GLatLng(parseFloat(markers[i].getAttribute(”lat”)),
parseFloat(markers[i].getAttribute(”lng”)));
map.addOverlay(createMarker(point,
markers[i].getAttribute(”title”),
markers[i].getAttribute(”details”),
markers[i].getAttribute(”icontype”),
markers[i].getAttribute(”typeid”)));
}
}

All it took was that one conditional statement. I’m still excited about this! With this, you can now programmatically add or remove points on a Google Map simply by searching for the markers[i].getAttribute(”title”) attribute and acting accordingly.

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.