Insert js code to infobox in google map

Question

Here I have a code - google custom search - which have a string and automaticly show results based on string...

CODE: http://jsbin.com/UgUxEKo/3/edit

<script>
  (function() {
    var cx = '004975901230883403229:puwldey9ibm';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

<script>
  $(window).load( function() {
   var input = $('#gsc-i-id1');
   input.val( input.val() + 'las vegas');
     $('input.gsc-search-button').click();
    $('form.gsc-search-box').css('display','none');
  })
</script>

Now I want to put this code into infobox in my map:

google.maps.event.addListener(marker,'click',function(){
        service.getDetails(request, function(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            var contentStr = '<div class="m_tooltip"><h5>'+place.name+'</h5><p>'+place.formatted_address+'</p>';
            if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
            if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
            if (!!place.photos) contentStr += '<img src='+place.photos[0].getUrl({ 'maxWidth': 300, 'maxHeight': 300 })+'></img>';
            contentStr += '<br>'+place.types+'</p>';
  ***(function() {
    var cx = '004975901230883403229:puwldey9ibm';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
            $(window).load( function() {
   var input = $('#gsc-i-id1');
   input.val( input.val() + 'las vegas');
     $('input.gsc-search-button').click();
    $('form.gsc-search-box').css('display','none');
  })
            contentStr += '<div><gcse:search></gcse:search></div>';***
            //contentStr += '<h5">'+place.reviews[0].text+'</h5></div>';
            ib.setContent(contentStr);
            ib.open(map,marker);
          } else { 
            var contentStr = "<h5>No Result, status="+status+"</h5>";
            ib.setContent(contentStr);
            ib.open(map,marker);
          }
        });

    });
gmarkers.push(marker);

So I add to info box google custom search code and $window.load function, and this for other elements but for infowindow dont.

How I can call this function but when infobox is created ? So not on $window.load just when InfoBox is created?

Is it possible?

Answer 1

Try the below code. I have not tried.

google.maps.event.addListener(marker,'click',function(){
        service.getDetails(request, function(place, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            var contentStr = '<div class="m_tooltip"><h5>'+place.name+'</h5><p>'+place.formatted_address+'</p>';
            if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
            if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
            if (!!place.photos) contentStr += '<img src='+place.photos[0].getUrl({ 'maxWidth': 300, 'maxHeight': 300 })+'></img>';
            contentStr += '<br>'+place.types+'</p>';
            contentStr += '<div><gcse:search></gcse:search></div>';

            var cx = '004975901230883403229:puwldey9ibm';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);

            var input = $('#gsc-i-id1');
            input.val( input.val() + 'las vegas');
            $('input.gsc-search-button').click();
            $('form.gsc-search-box').css('display','none');

            //contentStr += '<h5">'+place.reviews[0].text+'</h5></div>';
            ib.setContent(contentStr);
            ib.open(map,marker);
          } else { 
            var contentStr = "<h5>No Result, status="+status+"</h5>";
            ib.setContent(contentStr);
            ib.open(map,marker);
          }
        });

    });
gmarkers.push(marker);