Google Maps API 3

Question

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/

Natha · Accepted Answer · 2012-03-05 08:22:17Z

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
}

is it works for you? not for me.. and thx for quick response.
I've wrote something wrong : $.get(marker.link, function(data) { instead of $.get(marker.num, function(data) { Should now works

Heitor Chang · Accepted Answer · 2012-03-02 20:36:24Z

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>

but i don't understand what is "â€‹" at the bottom of the page, map :)
I don't understand what is happening either. I changed the code above so it would save without the weird character. I use emacs and it was saying: These default coding systems were tried to encode text in the buffer `stackdivhtml9.html': (iso-latin-1-dos (1309 . 8203)) However, each of them encountered characters it couldn't encode: iso-latin-1-dos cannot encode these: (an invisible character). It does point out where the character is. Not sure if an editor, web host, or jsfiddle is adding this character?
yes the problem was occured from the jsfiddle code.. there was an invisible? caracter after <div id="div1"><iframe id="myiframe" style="width:100%; height:100%" frameborder="0" scrolling="no"></iframe></div>
and i have one question.. can i filter this markers? i did it, but it was not a dynamic.. and it was checkbox style, i need toggle button.. and thanx for all..

Collectives™ on Stack Overflow

Google Maps API 3

2 Answers 2

2 Comments

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Related