I am working on an app which uses google maps to display the location of certain types of crimes that have been committed in a given area.
I wanted to be able to use Font Awesome icons as markers on the map, and I was able to use the google maps utility library (v3) to do this based off of this answer.
However, in using this method, specifically the MarkerWithLabel class, I cannot figure out how to properly display the content popover when clicking on my icon markers. I looked through the source code for this class but do not see any parameters which allow for this functionality.
I tried to make my Fontawesome Icon markers into buttons which toggle a popover but that did not work and no errors were shown in the console. So I then tried making the icon marker button toggle a modal. However, strangely, I am only able to toggle the modal when I click and drag the icon across the map, rather than simply on click. I would rather not allow the icon markers to be draggable but this is the only way I have been able to figure out how to toggle the modal.
Here is the google maps utility library I am referencing:
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
And here is my code:
<h1>Safety Map</h1>
<div id="map-canvas" class="map"></div>
<div class="modal fade modal-small " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
</div> <!-- .modal-header -->
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quasi voluptas nostrum culpa sunt laboriosam corporis perspiciatis animi rem unde. Nihil, doloribus soluta possimus non asperiores eius natus quaerat porro.</p>
</div> <!-- .modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-ar btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-ar btn-primary">Save changes</button>
</div> <!-- .modal-footer -->
</div> <!-- .modal-content -->
</div> <!-- .modal-dialog -->
</div>
<script>
function initialize() {
var crimes = <?php echo json_encode($crimes); ?>;
var count = crimes.length;
var mapCoordinates = new google.maps.LatLng( 50, 50 );
var myOptions = {
zoom: 14,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions );
for(x = 0; x < count; x++)
{
var coordinates = new google.maps.LatLng( crimes[x].lat, crimes[x].lng );
marker = new MarkerWithLabel({
title: crimes[x].type, //tooltip
draggable: true, //I'd rather not have this set to true
clickable: true,
position: coordinates,
icon: ' ',
map: map,
labelContent: '<button type="button" data-toggle="modal" data-target=".modal-small" class="btn btn-transparent fa fa-ambulance" style="color:rgba(144,15,15,0.8);"></button>',
labelClass: "labels" // the CSS class for the label
});
marker.setMap( map );
}
}
initialize();
</script>
Does anyone know why I cannot toggle the modal on click? Maybe there is a better way to do this? I simply want to be able to display some marker specific text once a user clicks on an icon marker on the map, whether that is with a popover or modal or similar method.
