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);
map.setTilt(45);
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>" +
'</div>'],
<?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]);
bounds.extend(position);
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() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, 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
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
// 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) {
this.setZoom(12);
google.maps.event.removeListener(boundsListener);
});
}
source to share
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=[
[0,0,'<div>Marker#1<br/><select><option>a<option>b<option>c</select>'],
[0,1,'<div>Marker#2<br/><select><option>a<option>b<option>c</select>'],
[0,2,'<div>Marker#3<br/><select><option>a<option>b<option>c</select>']
];
var InfoWindow=new google.maps.InfoWindow();
$.each(markers,function(i,item){
var marker=new google.maps.Marker({map:map,
position:{lat:item[0],lng:item[1]},
//create a DOMNode based on the content
//and store it as property of the marker
content:$(item[2])[0]
});
google.maps.event.addListener(marker,'click',function(){
//use the content-property of the marker(the DOMNode) as content
InfoWindow.setContent(this.get('content'));
InfoWindow.open(this.getMap(),this);
});
});
Demo: http://jsfiddle.net/doktormolle/bojqeres/
(pick different options from the selection and you will see the lists keep their state)
source to share