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.

 

Featured Advertisers

TheWebFreaks.com LinuxForum.com ApacheFreaks.com MySQLFreaks.com PHPFreaks.com WebHostFreaks.com Harbor City IT

Advertisements

Listed in the Marketingtool.com Melbourne, Florida Marketingtool.com Directory!   Advertise Here!