Wp google maps pro checkboxes to behave like radio button

I'm having this problem with WP Google Maps Pro filters/categories. Basically the plugin offers to display the categories as select dropdown and checkboxes. And since the select dropdown proved not that much of an help I tried to implement the radio button functionality on the checkboxes.

So what I'm trying to do here is make these checkboxes behave like radio buttons. So when one is checked others become unchecked. There's a catch though. I have to make the click on the parent rather than on the child. The checkbox itself was requested by my client to be hid, since it breaks his design, and I have to make the functionality of the tab switching in order to filter the markers.

I've hidden the checkboxes with css, and I've styled the parent and added some icons with jquery. Below is the html layout.

<div class="parent">
   <i class="category-icon-one"></i>
   <input type="checkbox" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_4" 
name="wpgmza_cat_checkbox" mid="1" value="4" tabindex="0">
    First Category
</div>
<div class="parent">
   <i class="category-icon-two"></i>
   <input type="checkbox" class="wpgmza_checkbox" id="wpgmza_cat_checkbox_4" 
name="wpgmza_cat_checkbox" mid="1" value="4" tabindex="0">
   Second Category
</div>

Here is the jQuery that I've managed to do so far:

$('.parent').click(function(){
  $('.parent').each(function(){
      $(this).find('input:checkbox').prop('checked', false);
  });
  $(this).find('input:checkbox').prop('checked', true);
});

So far this has not proved fruitful, so I need to find a way to make this radio button like functionality while clicking on the parent of the checkboxes. I would appreciate if some light were to shine on this. Thanks :)