CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3
zippo
zippo

Reputation: 339

Google Maps API 3

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/

Upvotes: 0

Views: 299

Answers (2)

Natha
Natha

Reputation: 55

Try add the page you want to include for each marker in the myPoints array, like :

var myPoints = [[43.65654, -79.90138, 'ABC','exemple1.html'],[43.91892, -78.89231, 'DEF','exemple2.html'],[43.82589, -79.10040, 'GHA','mypage.html']];  //create global array to store points

Then when you loop myPoints :

for(var i=0; i<myPoints.length; i++){
     createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2], myPoints[i][3]);
}

Then in your createMarker function :

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

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
    map.panTo(latlng);
    $.get(marker.num, function(data) {
     $('#div1').html(data);
    });
    $('#div1').show();
});

markerArray.push(marker); //push local var marker into global array
}

Upvotes: 1

Heitor Chang
Heitor Chang

Reputation: 6057

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>

Upvotes: 0

Related Questions