Results 1 to 4 of 4

Thread: Can Google maps infowindow content be from HTML or PHP file?

  1. #1
    Join Date
    Feb 2011

    Can Google maps infowindow content be from HTML or PHP file?

    Hi there,

    It's said "There are two ways of adding content to an InfoWindow. The first, and perhaps most straightforward
    way, is to provide an InfoWindow with a string that contains all the HTML. The other way is to provide it
    with a reference to an existing HTML node. This HTML node can either already exist in the document or
    be one that you create with JavaScript." - from Book "Beginning Google Maps API 3" - Chapter 7. Unfortunately, there is no example showing content from an "already exist in the document", but all others.

    I'm wondering how it is possible to populate infowindow content from separate html or psp file.

    Reason for this is that after user clicks on my google map marker he/she is presented to a long page consists of everal pages by clicking Next / Previous. On the google map, there are a lot of markers. I don't what all makers are loaded with a long page. Until a marker is clicked, a web page is loaded into open infoWindow.

    Right now I have this:

    var content = $('<div class="marker-info-win">'
    + '<div class="marker-inner-win"><span class="info-content">'
    + '<h1 class="marker-heading">'
    + MapTitle
    + '</h1>'
    + long page //(more html code)
    + '</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>'
    + '</div></div>');
    var infowindow = new google.maps.InfoWindow();

    And I'm looking for something like this:

    var content="html/desc.html";
    var infowindow = new google.maps.InfoWindow();

    I'm also planning to edit my html file with javascript before it gets shown but this should not intervene with my intention of reading from html file.

    document.getElementById('pointName').innerHTML = 'something';

    I have not had any luck googling it so hopefully someone can help. Thanks!

  2. #2
    Join Date
    Mar 2007
    Try asking in the JavaScript frameworks forum which is for JQuery problems.
    Last edited by jedaisoul; 08-17-2014 at 07:50 AM. Reason: Thread moved by moderator.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Feb 2011
    For the following code, it works as below to play a vedeo:
        var video = document.createElement('video');
        video.setAttribute('width', '300');
        video.setAttribute('height', '200');
        video.setAttribute('controls', 'controls');
        video.setAttribute('autoplay', 'autoplay');
    But when it's changed to
        var video = document.createElement('div');
    	 video.setAttribute('id', 'info');
        video.setAttribute('src', '7-1-1-info1.html');
        video.setAttribute('width', '300');
        video.setAttribute('height', '200');
    and 7-1-1-info1.html is as below
            <img src="img/squirrel.jpg" alt="" /> 
           <h2>Maps are awesome</h2>
            <p>A wnderful squrrel is looking for food</p>
            <p><a href="http://www.svennerberg.com">A sample link</a></p>
    It does not work. Why when it's a video, it works. But when it's 'html' or 'div', it does not work? Is 'html' a valid DOM element?

    (function() {
      // Defining variables that need to be available to some functions
      var map, infoWindow;
      window.onload = function() {
        // Creating a map
        var options = {  
          zoom: 3,
          center: new google.maps.LatLng(37.09, -95.71),  
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        map = new google.maps.Map(document.getElementById('map'), options);
        // Adding a marker to the map
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(40.756054, -73.986951),
          map: map,
          title: 'Click me'
        // Adding a click-event to the marker
        google.maps.event.addListener(marker, 'click', function() {
        // Check to see if an InfoWindow already exists
        if (!infoWindow) {
          infoWindow = new google.maps.InfoWindow();
        // Creating a video element and setting its attributes
           var video = document.createElement('div');
    	 video.setAttribute('id', 'info');
        video.setAttribute('src', '7-1-1-info1.html');
        video.setAttribute('width', '300');
        video.setAttribute('height', '200');
        // Passing the video variable as the content for the InfoWindow    
        // Opening the InfoWindow
        infoWindow.open(map, marker);
        // Opening the InfoWindow when the map loads
        google.maps.event.trigger(marker, 'click');
    Last edited by wow; 08-17-2014 at 05:24 PM.

  4. #4
    Join Date
    Feb 2011
    infoWindow's content can be loaded from a file through an AJAX call. I don't realize it's that hard to load infoWindow content from a file. Now I have another question to be answered: does google infoWindow have the ability to execute JavaScript AJAX code loaded from a file when a button inside of the infoWindow is clicked?


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles