Don´t preload images in XML (google maps API v3)

Question

Hey i have a question that seems very tricky.

I want to add images for every Infowindow in my map. But the clue is that the images shouldn't parse directly from the XML, because if there are 300 markers and for every marker an image, that would by a very big data which have to load on mapstart. Is it possible to load the image only if the marker has cliked ?

Heres my code:

<script type="text/javascript"> 

      var side_bar_html = ""; 
       var sidebarMarkers = []; 
     var infoWindow = new google.maps.InfoWindow(
    { 
        maxWidth: 250

      });
     <!----------- GASTHAUS image ------------> 

        var imageGasthaus = {
        url: 'image/gasthaus.png',
        scaledSize: new google.maps.Size(26, 26),   
      };


     <!----------- BAR image ------------>  
      var imageBar = {
        url: 'image/bar.png',
        scaledSize: new google.maps.Size(26, 26),   
      };




      var hoverIcons = [];
        hoverIcons["gasthaus"] = imageGasthausHover;
        hoverIcons["bar"] = imageBarHover;


      var customIcons = [];
        customIcons["gasthaus"] = imageGasthaus;
        customIcons["bar"] = imageBar;


        var markerGroups = { "gasthaus": [], "bar": []};


     function myclick(i) {
      google.maps.event.trigger(sidebarMarkers[i], "click");
    }

     function createMarker(latlng, name, address, tel, href, image, type) {

            var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: customIcons[type],
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });


    //// Infowindow öffnen bei Linksklick


        var onMarkerClick = function() {
          var marker = this;
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
        };

    google.maps.event.addListener(marker, 'click', onMarkerClick);


    //// Infowindow Inhalt 

      var html = '<div id="infowindowLink" style = "line-height: 1.35; overflow: hidden; ">' + '<span style="font-weight: bold; color:#008B00;">' + name + '</span> <br/>' + address + '<br><br>' + '<span>'  + href + '</span>' + '<br>'+ tel + '<br><br>'+ image + '</div>';

        side_bar_html += '<a href="javascript:myclick(' + (sidebarMarkers.length-1) + ')">' + name + '<\/a><br>';

     var zooms = point;

    }

    function initialize() {


    // XML-Datei auslesen

          downloadUrl("markerdata.xml", function(doc) {
            var xmlDoc = xmlParse(doc);
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");

            for (var i = 0; i < markers.length; i++) {
        name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var tel = markers[i].getAttribute("tel");
                var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>';


                // This should be loaded only if a marker get clicked 

                var image = '<img src="'+markers[i].getAttribute("image")+'" style="width:250px; height:180px;" alt=""/>';          


     var type = markers[i].getAttribute("type");

               point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));





            var marker = createMarker(point, name, address, tel, href, image, type);

            }

      document.getElementById("side_bar").innerHTML = side_bar_html;
          });
        }


    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

You don't have to care about these images.

Before you click the markers it's simply a string, no images will be loaded.

Only when you click on the marker this string will be used to create a <img/>-node inside the infoWindow(what will force the download)