I am using Codeigniter Google Maps V3 API library to display markers from database on map and so far it works great.
Problem is that I have multiple markers with identical coordinates. So, for example, I have three markers at one location but on map I see only one and get only one infowindow.
I did research and found that It is possible to create infowindow with multiple tabs with infoBubble JS library. Here is a good simple code for adding infoBubble and I wanted to start with just that for beggining.
I created simple contoller that displays map with one marker:
public function index()
{
$this->load->library('googlemaps');
$this->load->helper('url');
$config['center'] = "37.4419, -122.1419";
$config['zoom'] = "12";
$this->googlemaps->initialize($config);
$marker = array();
$marker['position'] = '37.429, -122.1419';
$this->googlemaps->add_marker($marker);
$data['map'] = $this->googlemaps->create_map();
$this->load->view('maps_view2', $data);
}
and it works fine. So now I added
$config['onload'] = 'var infoBubble = new InfoBubble({
maxWidth: 300
});
var div = document.createElement("DIV");
div.innerHTML = "Hello";
infoBubble.addTab("Tab 1", div);
infoBubble.addTab("Tab 2", "This is tab 2");
google.maps.event.addListener(marker, "click", function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});';
to my controller. Basically it simply adds JS code snipet to function initialize_map()
. I also added <script type="text/javascript" src="<?php echo base_url() ?>src/infobubble.js"></script>
to my view.
Comparing example that I used for code snipet with my sites source code I get the same code but there is no infoBubble...
Would appreciate if someone could hepl me understand where is the problem.
this should work
var infowindow = new google.maps.InfoWindow({
content:""
});
marker.setMap(map);
marker.addListener('mouseover', function() {
infowindow.open(map, marker);
});