Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Looped InfoBox with closure on Google Maps API V3

By: phirephoenix on Jan 24th, 2013  |  syntax: JavaScript  |  size: 1.52 KB  |  views: 165  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.     function initialize() {
  2.             var mapOptions = {
  3.               center: new google.maps.LatLng(35.542284,-76.856),
  4.               zoom: 11,
  5.               mapTypeId: google.maps.MapTypeId.ROADMAP
  6.             };
  7.             var map = new google.maps.Map(document.getElementById("map_canvas"),
  8.                 mapOptions);
  9.  
  10.                 $(document).ready(function(){
  11.                         $.getJSON('test.json', function(data) {
  12.  
  13.                                 for (i = 0; i < data.length; i++) {
  14.                                         var item = data[i];
  15.                                         var myLatlng = new google.maps.LatLng(item.lat, item.longs);
  16.  
  17.                                         var marker = new google.maps.Marker({
  18.                                             position: myLatlng,
  19.                                             map: map,
  20.                                             title: item.name,
  21.                                             icon: item.type + ".png"
  22.                                         }); // end add new marker
  23.                                         attachBox(marker, i)
  24.                                 } //end for loop
  25.  
  26.                                 var ib = new InfoBox();
  27.  
  28.                                 function attachBox(marker, i) {
  29.                                         google.maps.event.addListener(marker,'click',(function(marker, i) {
  30.                                                 var boxText = document.createElement("div");
  31.                                                 boxText.style.cssText = "border: 1px solid black;";
  32.                                                 boxText.innerHTML = item.name;
  33.                                                
  34.                                                 var myOptions = {
  35.                                                         content: boxText,
  36.                                                         boxStyle: {
  37.                                                                 opacity: 0.75,
  38.                                                                 width: "280px"
  39.                                                                 },
  40.                                                         closeBoxMargin: "12px 4px 2px 2px",
  41.                                                 };
  42.                                                 return function() {
  43.                                                         ib.setOptions(myOptions)
  44.                                                         ib.open(map, this);
  45.                                                 }
  46.                                         })(marker, i));
  47.                                 } // end attachBox
  48.                         }) // end getJSON
  49.                 }); // end jQuery
  50.         } // end initialize