Home/ Questions/Q 7582281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T18:23:52+00:00

i have 3 marker.. can i load example1.html to div1 when clicked to marker1?

  • 0

i have 3 marker.. can i load example1.html to div1 when clicked to marker1? and example2.html to div1 for marker2..

here is my modified demo by @kjy112 http://jsfiddle.net/rD8U6/198/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What I am doing is adding an iframe inside your div1. With that in place, I replaced the third item of your myPoints array to the name of the html file or hyperlink you want. (Note you might run into “display forbidden” under x-frame-options, I get that with google.com and am unable to place it into the div/iframe). It should work inside your own domain.

    Make two (simple) static htmls called static_a.html and static_b.html to test the code below. The middle marker should go to New York University’s homepage.

    Given the link for each marker, the div is changed indirectly, from the change in the iframe’s src with $("#myiframe").attr('src', html); in the marker’s click listener.

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    html, body {
      margin:0px;
      padding:0px;
      height:100%;
    }
    #map_canvas {
      width:500px;
      height:100%;
    }
    #div1 {
      background-color:#0FC;
      width:300px;
      height:100%;
      position:absolute;
      right:0px;
      top:0px;
      display:none;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'static_a.html'],
                [43.91892, -78.89231, 'static_b.html'],
                [43.82589, -79.10040, 'http://www.nyu.edu']];  //create global array to store points

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for(var i=0; i<myPoints.length; i++) {
         createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
    }

    //mc.addMarkers(markerArray , true);
}

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

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
        map.panTo(latlng);
        $("#div1").show();
        $("#myiframe").attr('src', html);

    });

    markerArray.push(marker); //push local var marker into global array
}
    </script>
  </head>
  <body onload="initialize()">
<div id="map_canvas"></div>
<div id="div1"><iframe id="myiframe" style="width: 100%; height: 100%"></iframe>
</div>

  </body>
</html>
    • 0