How to show the marker info inside infobox separately?

Question

I bought this template from themeforest.com every things works great. But one thing. The infobox keeps showing the same content every time I clicked on the marker. It's not change to its location and information.

I would like it to display the marker information when it is clicked. I can make the array for the locations but not for myOptions. Here's my code:

<div id="map"></div>

Javascript

$(document).ready(function() {
    InitMap();
});
function LoadMap() {
    var locations = new Array(<?= implode(',',$gps);?>);
    var markers = new Array();
    var mapOptions = {
        center: new google.maps.LatLng(7.9597293,98.3333532),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[0], location[1]),
            map: map,
            icon: "http://<?=$_SERVER['HTTP_HOST']?>/images/marker-transparent.png"
        });

        var myOptions = {
            content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">1041 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-146, -130),
            zIndex: null,
            closeBoxURL: "",
            infoBoxClearance: new google.maps.Size(1, 1),
            position: new google.maps.LatLng(location[0], location[1]),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };
        marker.infobox = new InfoBox(myOptions);
        marker.infobox.isOpen = false;

        var myOptions = {
            draggable: true,
            content: '<div class="marker"><div class="marker-inner"></div></div>',
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(-21, -15),
            position: new google.maps.LatLng(location[0], location[1]),
            closeBoxURL: "",
            isHidden: false,
            // pane: "mapPane",
            enableEventPropagation: true
        };
        marker.marker = new InfoBox(myOptions);
        marker.marker.open(map, marker);
        markers.push(marker);

        google.maps.event.addListener(marker, "click", function (e) {
            var curMarker = this;

            $.each(markers, function (index, marker) {
                // if marker is not the clicked marker, close the marker
                if (marker !== curMarker) {
                    marker.infobox.close();
                    marker.infobox.isOpen = false;
                }
            });


            if(curMarker.infobox.isOpen === false) {
                curMarker.infobox.open(map, this);
                curMarker.infobox.isOpen = true;
                map.panTo(curMarker.getPosition());
            } else {
                curMarker.infobox.close();
                curMarker.infobox.isOpen = false;
            }

        });
    });
}

function InitMap() {
    google.maps.event.addDomListener(window, 'load', LoadMap);
}

Answer 1

Instead of creating InfoBox instance per every marker, you could create a single instance of InfoBox and then set content/position of info window once the marker is clicked as demonstrated below:

function loadMap() {
    var locations = new Array(['Phuket',7.877285, 98.392099],['Wat Chalong Temple',7.845826, 98.328928],['nn+Patong+Beach+Hotel',7.8739695,98.343519,13]);
    var markers = new Array();
    var mapOptions = {
        center: new google.maps.LatLng(7.866062, 98.365492),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };

    var infoBoxOptions = {
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-146, -130),
            zIndex: null,
            closeBoxURL: "",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false,
            closeBoxMargin: "10px 2px 2px 2px",
			closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
    };
    var infoBox = new InfoBox(infoBoxOptions);

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[1], location[2]),
            map: map,
        });

    
        google.maps.event.addListener(marker, "click", function (e) {
            var curMarker = this;

            map.panTo(curMarker.getPosition());
            //infoBox.setPosition(curMarker.getPosition());
            infoBox.setContent('<div class="infobox"><h2>Some information for ' + location[0] + ' goes here</h2></div>');
            infoBox.open(map, this);            
        });
    });
}


google.maps.event.addDomListener(window, 'load', loadMap);

#map {
    width: 100%;
    height: 400px;
}

.infobox {
    display: inline-block;
    zoom: 1;
    background-color: #fff;
    padding: 10px;
    position: relative;
    width: 270px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>