Google Maps API - add images to infowindow

Hi,

I found and tweaked the Google Map example below which shows multiple infowindows for multiple locations. Question is, how can I modify this code to show an image in each infowindow?

Many thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Maps Example</title>
     <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(52.258175, -7.11);

        var myOptions = {
            zoom: 13,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, sites);
	    infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });


    }

    var sites = [
	['Mount Evans', 52.253238,-7.115563, 4, 'This is Mount Evans.','images/Sunset.jpg'],
	['Irving Homestead', 52.253238,-7.125563, 2, 'This is the Irving Homestead.','images/Sunset.jpg'],
	['Badlands National Park', 52.253238,-7.135563, 1, 'This is Badlands National Park','images/Sunset.jpg'],
	['Flatirons in the Spring', 52.253238,-7.145563, 3, 'These are the Flatirons in the spring.','images/Sunset.jpg']
];

    function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>

<div id="map_canvas" style="width: 600px; height: 600px;"></div>
</body>
</html>

Open in new window

kbitAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Just add the html code for an image, instead of just the image url, in your array.
0
kbitAuthor Commented:
Ok I've modified the array as below but still no image. The image path is definitely correct
Thanks

var sites = [
	['Mount Evans', 52.253238,-7.115563, 4, 'This is Mount Evans.','<IMG BORDER="0" ALIGN="Left" SRC="images/Sunset.jpg">'],
	['Irving Homestead', 52.253238,-7.125563, 2, 'This is the Irving Homestead.','images/Sunset.jpg'],
	['Badlands National Park', 52.253238,-7.135563, 1, 'This is Badlands National Park','images/Sunset.jpg'],
	['Flatirons in the Spring', 52.253238,-7.1415563, 3, 'These are the Flatirons in the spring.','images/Sunset.jpg']
];

Open in new window

0
GaryCommented:
Do you have a link to the page, I'm not sure if you would need the full path.
0
GaryCommented:
Your image needs to be part of the 'This is Mount Evans.' bits
e.g.
'This is Mount Evans.<br><IMG BORDER="0" ALIGN="Left" SRC="images/Sunset.jpg">'
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kbitAuthor Commented:
Brilliant, thanks very much, this worked perfectly and allows me to style the content a lot more.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.