Menu
I have an image that I want to add to a marker, stagleton.png, and I have a function to create a marker. How do I change the InfoWindow method so that the image is also displayed with the text in the InfoWindow?
function createMarker(name, latlng, mapsent)
{
var marker = new google.maps.Marker({
position: latlng,
map: mapsent,
title: name
});
marker.info = new google.maps.InfoWindow({
//when I add <IMG BORDER="0" ALIGN="Left" SRC="stagleton.jpg"> the maps will not load
content: <IMG BORDER="0" ALIGN="Left" SRC="stagleton.jpg"> "My name is " + name
});
google.maps.event.addListener(marker, 'click', function(){
marker.info.open(mapsent, marker);
});
return marker;
}
296
To make the info window visible, you must call the open() method on the InfoWindow , passing an InfoWindowOpenOptions object literal specifying the following options: map specifies the map or Street View panorama on which to open. anchor contains an anchor point (for example a Marker ).
The simplest way to add an info window is to set the title() and snippet() methods of the corresponding marker. Setting these properties will cause an info window to appear whenever that marker is clicked.
An InfoWindow can be placed on a map at a particular position or above a marker, depending on what is specified in the options. Unless auto-pan is disabled, an InfoWindow will pan the map to make itself visible when it is opened. After constructing an InfoWindow, you must call open to display it on the map.
By assigning the infowindow to a marker property, each marker can have it's own infowindow. This was how I approached the problem, with the relevant sample code. //create a marker object first, or instantiate it by passing a JSON to the constructor. //this can be done inside a for loop var infowindow = new google.
Try:
content: '<IMG BORDER="0" ALIGN="Left" SRC="stagleton.jpg"> My name is ' + name
@Dr.Molle, did you try that in IE? I can't get the infoWindows to open in IE any time they have an image inside of them. They are just tiny with the X to close it, but no other content.
As soon as I remove the image, the rest of the content (h1 tags, links, text) shows fine, and the infoWindow opens.
Any clues??
EDIT: You MUST specify height and width attributes in the IMG tag for IE to be able to render the infoWindow with an image in it. IE is the WORST browser in history, what a POS...
Hopefully that helps someone!
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
