How can I resize infowindow with button onclick in it? + Change content of infowindow

Question

I have tried a lot of different ways to write this, but I really dont understand how I can do it. I am new in javascript, so maybe it will be easy to do for you.

I have infobox when I click on marker on map. I want to have "more" button in that infobox. When someone clicks on the button, the infobox will resize and change content. How can I write it, using javascript and HTML?

resizeWindow = function (stringItem, isResized) {
    var eventItem = JSON.parse(stringItem);
    processLocation(eventItem, isResized);
};

processLocation = function (eventItem, isResized) {
    var i, contentString, myOptions, ib, markerOptions, marker, infoWindowWidth;

    console.log("---> event is stoned: " + eventItem.name);

    var stringItem = JSON.stringify(eventItem);

    if (!isResized) {
        infoWindowWidth = "450px";
        contentString =
        '<div class="eventitem-content">' +
            '<div class="eventitem-bodycontent">' +
                '<div class="eventitem-title">' + eventItem.name + '</div><img src="/Content/LandfillPhotos/' + eventItem.photo_number + '.png" alt="Landfill" style="width:425px;height:335px"/>' +
                '<div class="eventitem-company">' + eventItem.company + '</div><div class="eventitem-address">' + eventItem.company_address + '</div>' +
                '<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>' +
            '</div>' +
        '</div>';
        console.log(isResized);
    } else {
        infoWindowWidth = window.screen.availWidth + "px";
        contentString =
        '<div class="eventitem-content">' +
            '<div class="eventitem-bodycontent">' +
                '<div class="eventitem-title">' + eventItem.name + '</div><img src="/Content/LandfillPhotos/' + eventItem.photo_number + '.png" alt="Landfill" style="width:425px;height:335px"/>' +
                '<div class="eventitem-company">' + eventItem.company + '</div><div class="eventitem-address">' + eventItem.company_address + '</div>' +
                '<button onclick="FBN.events.resizeWindow(' + stringItem + ', false)">Více</button>' +
            '</div>' +
        '</div>';
    }


    myOptions = {
        content: contentString,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 4),
        zIndex: null,
        boxStyle: {
            width: infoWindowWidth
        },
        closeBoxMargin: "6px",
        closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };

    ib = new InfoBox(myOptions);
    infoWindows.push(ib);

    markerOptions = {
        position: new google.maps.LatLng(eventItem.latitude, eventItem.longitude),
        map: map,
        title: eventItem.name,
        icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/32/Map-Marker-Marker-Outside-Azure.png'
    }

    marker = new google.maps.Marker(markerOptions);
    markers.push(marker);

    createListener(marker, map, ib);
};

When I do it like this, console writes me: Unexpected token ;

'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>' +

This line is problem

Answer 1

This is a really involved situation, and there will be more issues soon with variable scoping once you solve this immediate problem. I will show you how to solve your immediate problem which is regarding the Unexpected token ; .

You are in a difficult spot with quotes and JSON. Take your code for example:

'<button onclick="FBN.events.resizeWindow('+ stringItem + ', true)">Více</button>'

Your stringItem is no longer just a variable, but its contents will be inlined above. If it has any unescaped single or double quotes, it will cause an error.

Here is a sample stringItem I recovered:

{"name":"Skládka odpadů S-OO3 se sektorem S-OO1 Ďáblice","county_code":"CZ010", ... ,"longitude":"14.482411","photo_number":"1"}

In other words, you are essentially writing this dynamic HTML. Notice the double quotes:

<button onclick="FBN.events.resizeWindow({"name":"Skládka odpadů S-OO3 se sektorem S-OO1 Ďáblice","county_code":"CZ010", ... ,"longitude":"14.482411","photo_number":"1"}, true)">Více</button>

First, you need to surround this literal string with single quotes. So we need this:

'<button onclick="FBN.events.resizeWindow(\''+ stringItem + '\', true)">Více</button>'

This is enough information for you to solve your problem, but to go a step further, instead of

var stringItem = JSON.stringify(eventItem);

you should encode stringItem more to remove all quotes. I got your code working with this:

var stringItem = utf8_to_b64(JSON.stringify(eventItem));

where I included these useful functions whose names are self-explanatory:

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

When I made the modifications to the site you supplied (using Chrome Dev tools), your "Vice" buttons now render like this

<button onclick="FBN.events.resizeWindow('eyJuYW1lIj ... IjoiMyJ9', true)">Více</button>

which is now valid syntax. Your new problem is where the onclick handler expects to find FBN.events.resizeWindow() . But that's for a different question. :)

Here are some of the changes I experimented with: http://pastebin.com/Uczwct8H