Saving Google Map InfoWindow content in multiple events with multiple clicks

My google map has several markers with corresponding infowindow content. The user can click a marker, view the InfoWindow, interact with the infowindow to do some processing in the backend. According to the server (server) answer, I am updating the form data in the info window. The data in this form is unique for the selected infoindustry and marker. So far so good.

The problem occurs when I click on another marker and interact with that infowindow. When I select the previous infowindow, it does not maintain the last state, which means changing the hidden form fields, and the state changes of the ui button are not shown. A message appears with default content. So it is clear that every time the infowindow is regenerated.

I need to keep the changes in each infowindow when interacting with other markers on the map. Can someone please give a solution? Thanks in advance.

function initialize() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var defaultCenter = new google.maps.LatLng(<?php echo $user_lat; ?>, <?php echo $user_lng; ?>);
        var mapOptions = {
            mapTypeId: 'roadmap',
            center: defaultCenter,
            panControl: true,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true

        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var markers = [];
        var infoWindowContent = [];
        // Multiple Markers
<?php if (!empty($plumbers)): ?>
            markers = [
    <?php foreach ($plumbers as $result): ?>
                    ['<?php echo $result['first_name']; ?>', <?php echo $result['lat']; ?>, <?php echo $result['lng']; ?>],
    <?php endforeach; ?>
<?php endif; ?>

        // Info Window Content
<?php if (!empty($plumbers)): ?>
            infoWindowContent = [
    <?php foreach ($plumbers as $result): ?>
                    ['<div class="info_content">' +
                            '<h3><?php echo $result['first_name'] . ' - ' . $result['location']; ?></h3>' +
                            '<?php echo number_format($result['distance'], 2); ?> miles away' +
                            //'<p><?php //echo anchor('plumbers/assign/' . $result['location'] . '/' . $service_id . '/' . $service_type_id . '/' . $customer_id . '/' . $result['id'], 'Assign');  ?></p>' +
                            "<form method='post'>" +
                            "<input type='hidden' name='<?php echo $this->security->get_csrf_token_name(); ?>'  value='<?php echo $this->security->get_csrf_hash(); ?>'>" +
                            "<input type='hidden' name='plumber_id' id='plumber_id' value='<?php echo $result['id']; ?>'>" +
                            "<input type='hidden' name='location' id='location' value='<?php echo $result['location']; ?>'>" +
                            "<input type='hidden' name='lat' id='lat' value='<?php echo $result['lat']; ?>'>" +
                            "<input type='hidden' name='lng' id='lng' value='<?php echo $result['lng']; ?>'>" +
                            "<input type='hidden' name='service_id' id='service_id' value='<?php echo $service_id; ?>'>" +
                            "<input type='hidden' name='service_type_id' id='service_type_id' value='<?php echo $service_type_id; ?>'>" +
                            "<input type='hidden' name='customer_id' id='customer_id' value='<?php echo $customer_id; ?>'>" +
                            "<button type='button' class='btn-assign btn btn-success btn-sm' data-status='unassigned' data-cs-id=''><i class='fa fa-plus'></i> Assign</button>" +
                            "<input type='hidden' name='cs_id' id='cs_id' value=''>" +
                            "<img src='<?php echo base_url('assets/img/loader.GIF'); ?>' class='assign-loader'>" +
                            "</form>" +
    <?php endforeach; ?>
<?php endif; ?>

        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow(), marker, i;

        // Loop through our array of markers & place each one on the map  
        for (i = 0; i < markers.length; i++) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]

            // Allow each marker to have an info window    
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
          , marker);
            })(marker, i));

            //Handle click assign button
//            google.maps.event.addListener(infoWindow, 'domready', function() {
//                $("body").on('click', '.btn-assign', function(e) {
//                    alert('');
//                });
//            });

            // Automatically center the map fitting all markers on the screen

        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {




source to share

1 answer

You must use DOMNode as content instead of string.

A simple example that creates a DOMNode based on a content string:

  //a simple array with latitude, longitude and content-string
  var markers=[
  var InfoWindow=new google.maps.InfoWindow();

    var marker=new google.maps.Marker({map:map,
                                       //create a DOMNode based on the content
                                       //and store it as property of the marker
      //use the content-property of the marker(the DOMNode) as content


(pick different options from the selection and you will see the lists keep their state)



All Articles