phirephoenix

Looped InfoBox with closure on Google Maps API V3

Jan 24th, 2013
452
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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
Add Comment
Please, Sign In to add comment