Widget in info window with multiple markers

Question

I'm trying to create a map with lots of markers and info windows using the Google Maps API. I can get a map to display lots of markers and info windows either with the locations in the script or loading them from a file.

What i want to do is put this code:

<script type="text/javascript" src="http://www.tidetimes.org.uk/aberdaron-tide-times.js"></script>

into the info window so the marker will be at the location and when clicked the info window shows the tide time.

I can't find any way of getting this to work within the info window. Can anyone help? Thanks

score 1 · Answer 1 · answered Jun 19 '12 at 10:06

I'm sorry, I don't fully understand what you are saying. What do you mean exactly by this "What i want to do is put this code into the info window so the marker will be at the location and when clicked the info window shows the tide time."?

First of all, you do not need code inside an info window to give the marker a location. That is one of the markers standard attributes.

Second, I am almost certain you cannot have an event(code) inside your info window. What you can do is when a user clicks the marker, the map will zoom in or out. And you can have another event on that marker later.

Maybe this will help your answer (taken from Google Maps API documentation)

"The InfoWindow's content may contain either a string of text, a snippet of HTML, or a DOM element itself. "

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

you need to add html to the infowindow..

See the documentation

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

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

Edit

After further inspection of your code and your site i believe you're asking how to inject times and dates through a single file.

My suggestion is to use a JSON returned object from your server side code, iterate through the json object and use a template for the popup.

If you are curious you can reference something we do similar at http://demo.mapitusa.com you can easily browse the source code and find the js files that are required and see a working example.

Widget in info window with multiple markers

2 Answers2

Edit