Question

I have the following code in a Google map script…

<a class='btn btn-modal' data-target='popup.html'>Go</a>

outside of the script the link works and runs the function $('.btn-modal').click(function() { (on the page) but in the infoWindowHtml it does not.

anyone know why you cannot run script on my page from within goggle maps?

Script I want to be run at the top of the page Google maps is on…

$(document).ready(function () {
    // Support for AJAX loaded modal window
    $('.btn-modal').click(function () {
        $.get($(this).attr('data-target'), function (data) {
            $('#modal').html(data);
            $('#modal').modal('show');
        }, 'html');
    });
});

Google map extract showing link

map = new google.maps.Map(document.getElementById("map"), options);
// Create an Array for the Markers
var markers = [];
var latLng = new google.maps.LatLng(#local.poiLat()#, #local.poi()#);
var iconImg = '/assets/images/pin-50.png';
var marker = new google.maps.Marker({
    icon: iconImg,
    draggable: true,
    position: latLng,
    title: '#left(local.poiTxt(),60)#'
});
// Action Listener for the Marker
google.maps.event.addListener(marker, "click", function (event) {
    var area = this.get('location');
    var infoWindowHtml = "<a class='btn btn-modal' data-target='popup.html'>Go</a>";
    infoWindow.setContent(infoWindowHtml);
    infoWindow.open(map, this);
});

Answer 1

The infowindow isnt part of the DOM on load … so you need to use on instead of click :

$(document).on('click','.btn-modal',function() {

Where document is a parent element present on load – perhaps the id of the div for the map … so

$('#map').on('click','.btn-modal',function() {

docs for .on() here