How could I style the echo?

[usman07]

Yeah sure heres the link: http://www.mumtazproperties.hostei.com/map.html

[mrMarcus]

Yeah sure heres the link: http://www.mumtazproperties.hostei.com/map.html

 

OK - you're not passing 'image' as an argument to the createMarker() function.  See how you passed the others, you need to pass image as well.

 

function createMarker(point, name, address, type, image) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<img src='" + image + "'/><span class='mapinfo'>" + name + "</span> <br/><br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

[usman07]

it must have something to do with this area of code? How can I implement the image in there too? thanks

function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(53.823708, -1.513281), 13);

        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

[usman07]

Iv actually got it sorted and it appears now, how do i go about styling it? thanks!

[mrMarcus]

Iv actually got it sorted and it appears now, how do i go about styling it? thanks!

 

Yes, every time you add a new column you'll need to update all applicable code within the script(s).  That's why I was saying this way is over-complicating the process using an external XML generator PLUS a separate XML parser.

 

Style it like I showed you earlier.  Inline within the createMarker() function.  Or by using CSS classes.

[usman07]

Yeah the problem im having now is when you click the pointer, the first image comes out of the window, then unclick it and click it again, it then stretches. why does it do this, have a look here on this link please: http://www.mumtazproperties.hostei.com/map.html       

and click the yellow pointer, thanks

[mrMarcus]

Yeah the problem im having now is when you click the pointer, the first image comes out of the window, then unclick it and click it again, it then stretches. why does it do this, have a look here on this link please: http://www.mumtazproperties.hostei.com/map.html       

and click the yellow pointer, thanks

 

Works fine for me.  The image is contained within the infowindow.

[usman07]

The image sticks out of the info window then when I select it again, the info window then stretches? What browser are you using?

[usman07]

The first click showing you in the image below:

[mrMarcus]

Always have a width and height declared for an image.  You can do so using css, or to be 100% compatible across the board, use in the inline width/height attributes as some versions of IE will not render the image at all without them.

 

function createMarker(point, name, address, type, image) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<img src='" + image + "' width='100' height='75' align='left'/><span class='mapinfo'>" + name + "</span> <br/><br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

 

Use that block of code.

[usman07]

Thats brilliant mate, thats works, the only problem I have now is when I click the yellow pointer, the window info moves and points elsewhere away from where the pointer is.

[usman07]

ignore the above post, I got it sorted, thanks so much for all your help! Hugely appreciate it!

[Drummin]

You're going to want to move this body tag out of the table.  Have this one with the onload properties replace your regular <body> tag.

<tr>
<th><div id="key"><img src="cutouts/maps/key.jpg" alt=""/></div></th>
  <body onload="load()" onunload="GUnload()">
   <th><div id="map" style="width: 780px; height: 480px"></div></th>
   </tr>

[Drummin]

I see you still have body tag within <tr> tag.

<body onload="load()" onunload="GUnload()">

Fix this.