www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    Feb 2011
    Posts
    82

    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();
    infowindow.setContent(content);

    And I'm looking for something like this:

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

    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
    Location
    localhost
    Posts
    2,360
    Try asking in the JavaScript frameworks forum which is for JQuery problems.
    Last edited by jedaisoul; 08-17-2014 at 06:50 AM. Reason: Thread moved by moderator.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Feb 2011
    Posts
    82
    For the following code, it works as below to play a vedeo:
    Code:
        var video = document.createElement('video');
        video.setAttribute('src',
            'http://upload.wikimedia.org/wikipedia/commons/3/3f/ACA_Allertor_125_video.ogv');
        video.setAttribute('width', '300');
        video.setAttribute('height', '200');
        video.setAttribute('controls', 'controls');
        video.setAttribute('autoplay', 'autoplay');
    But when it's changed to
    Code:
        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
    Code:
            <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?

    CODE:
    Code:
    (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    
        infoWindow.setContent(video);
        
        // 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 04:24 PM.

  4. #4
    Join Date
    Feb 2011
    Posts
    82
    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?

    Thanks,

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