CODEWITHSUNDEEP
javascriptgoogle-maps
Jimmysnn
Jimmysnn

Reputation: 593

calling javascript in infowindow google map

I am trying to call javascript inside google map infoWindow(). I know it's a classic question. I have read a lot of similar question in stackoverflow butI I can't find solution :(

my code:

<!DOCTYPE> 
<html> 
   <head> 
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/> 
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <title>Rectangle Overlay</title> 
   <style type="text/css"> 
   #map { 
   width:1200px; 
   height: 700px; 
   } 
   </style> 
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
   <script type="text/javascript"> 
function init() { 
var myOptions = { 
  center: new google.maps.LatLng(38.122404, 23.862591), 
  zoom: 3, 
  mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map'),myOptions); 



  var locations = [
      ['Bondi Beach', 38.6391,23.3437],
      ["<scr"+"ipt type='text/javascript'>alert('test');</scr"+"ipt>", 37.893, 23.936999999999998]
    ];


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

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }



 } 
 google.maps.event.addDomListener(window, 'load', init); 
 </script> 
 </head> 
 <body> 
 <h1>Service</h1> 
<h2> Map <h2> 
 <div id="map"></div>  

    </script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body> 
 </html>

anyone know how to solved this issue?

Thank you!

EDIT:

The answer of Jonas Grumannis correct. In fact the javascript that I need to run is to build a cloudword inside infowindow calling TermCloud() function . I try below code. Any idea please???

 <!DOCTYPE> 
    <html> 
       <head> 
    <link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/> 
    <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
       <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
       <title>Rectangle Overlay</title> 
       <style type="text/css"> 
       #map { 
       width:1200px; 
       height: 700px; 
       } 
       </style> 
       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
       <script type="text/javascript"> 
    function init() { 
    var myOptions = { 
      center: new google.maps.LatLng(38.122404, 23.862591), 
      zoom: 3, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById('map'),myOptions); 



      var locations = [
          ['Bondi Beach', 38.6391,23.3437],
          ["Hello", 37.893, 23.936999999999998]
        ];


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

        var marker, i;

        for (i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              //infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
              var yourFunction = new YourFunction(locations[i][0])

            }
          })(marker, i));
        }


         var YourFunction = function(str) {
            this.init = function() {

          google.load("visualization", "1");
          google.setOnLoadCallback(draw);     

            }
            this.init();
        }

    function draw() {
            data = new google.visualization.DataTable();
            data.addColumn('string', 'Label');
            data.addColumn('number', 'Value');
            data.addColumn('string', 'Link');
            data.addRows(3);
            data.setValue(0, 0, 'First Term');
            data.setValue(0, 1, 10);
            data.setValue(1, 0, 'Second');
            data.setValue(1, 1, 30);
            data.setValue(1, 2, 'http://www.google.com');
            data.setValue(2, 0, 'Third');
            data.setValue(2, 1, 20);
            var outputDiv = document.getElementById('tcdiv');
            var tc = new TermCloud(outputDiv);
            tc.draw(data, null);
          }



     } 



     google.maps.event.addDomListener(window, 'load', init); 
     </script> 
     </head> 
     <body> 
     <h1>Service</h1> 
    <h2> Map <h2> 
     <div id="map"></div>  

        </script>
    </td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body> 
     </html>

Upvotes: 6

Views: 10964

Answers (3)

AnomalySmith
AnomalySmith

Reputation: 637

What about click event in Google Map API V3?

var infowindow = new google.maps.InfoWindow({
    content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});

google.maps.event.addListener(marker, 'click', function(e){
    infowindow.open(map, marker);
    // Other stuff goes here...
});

Upvotes: 0

pmont
pmont

Reputation: 2129

Found a solution -- wrap the infoWindow content in a div and add a listener in the 'domready' event for that div's id (see this SO thread):

var infowindow = new google.maps.InfoWindow({
    content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
    $('#myInfoWinDiv').click(function() {
        //Do your thing
    });
});

In my example, a click handler is attached to the div using jQuery. You can put any JS in the domready event handler. It needs to be done in the infoWindow's domready, otherwise you can't be certain that the object has been created.

Upvotes: 10

Jonas Grumann
Jonas Grumann

Reputation: 10786

I think calling a function click listener should work (haven't tested it though):

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
      var yourFunction = new YourFunction()
    }
  })(marker, i));

Then, outside all the google maps stuff

var YourFunction = function() {
    this.init = function() {
        alert("You have clicked a marker");
    }
    this.init();
}

Upvotes: 2

Related Questions