Activ'Map jQuery Plugin
Powerfull Map with your own Places

The perfect plugin to research and locate custom services and equipments in a city, among other things, Activ'Map is a jQuery plugin using the Google Maps API V3 and Bootstrap 3.x which display a map with markers sorted by categories.
Accordion panels contains checkbox filters (tags) which shows or hides the associated places in a removable panel and the corresponding markers on the Google Maps.
Click on a place to focus on the marker on the map and vice versa.
The markers can be clustered if too numerous. The system is fully responsive so the removable panel displays itself or not according to the device.
Remove or add your own categories, tags and places as many as you want!
Define the center of the map by simply inputting the latitude and the longitude.
Based on HTML5 - CSS3 - Bootstrap 3.x - jQuery - Google Maps API V3

Latest update: 05/08/2021 - By: Pandao

Demo Purchase & Download

Thank you for purchasing our Plugin. If you have any questions that are beyond the scope of this help file, please contact us. Thanks so much!

Implementation

To implement the Activ'Map on a page, you need to link the following CSS and JS files.

<!-- JQuery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- Bootstrap 3 / Optional -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>

<!-- Google Maps API V3 -->
<script src="https://maps.googleapis.com/maps/api/js?js?v=3.exp&libraries=places&sensor=false"></script>

<!-- Activ'Map plugin -->
<link rel="stylesheet" href="jquery-activmap/css/jquery-activmap.css">
<script src="jquery-activmap/js/jquery-activmap.js"></script>
<script src="jquery-activmap/js/markercluster.min.js"></script>

Then, all that you have to do is call the Activ'Map on the page with your own places.

$(function(){
    //Activ'Map plugin init
    $('#activmap-wrapper').activmap({
        places : [
            {title:'Place_1', address:'XX Str City', phone:'+XX XX XXXX', tags:['tag_01'], lat:XX.XXX, lng:-X.XXX, img:'pic_1.jpg'},
            {title:'Place_2', address:'XX Str City', phone:'+XX XX XXXX', tags:['tag_01','tag_02'], lat:XX.XXX, lng:-X.XXX, img:'pic_2.jpg'}
        ]
    });
});

Basic HTML code

<!-- Reset button -->
<a id="activmap-reset" href="#">Reset</a>

<!-- List of filters -->
<input type="checkbox" name="marker_type[]" value="my_tag_01"> TAG 1<br>
<input type="checkbox" name="marker_type[]" value="my_tag_02"> TAG 2<br>
<input type="checkbox" name="marker_type[]" value="my_tag_03"> TAG 3<br>
...

<div id="activmap-wrapper">
    <!-- Places panel (auto removable) -->
    <div id="activmap-places" class="hidden-xs">
        <div id="activmap-results-num"></div>
    </div>
    <!-- Map wrapper -->
    <div id="activmap-canvas"></div>
</div>

JSON use

You can also use JSON file to define your places. Simply enter the url of this file instead of the default array of places.

$(function(){
    //Activ'Map plugin init
    $('#activmap-wrapper').activmap({
        places : '/places.json'
    });
});

JSON example:

{
    "places": [
        {"title":'Place_1', "address":'XX Str City', "phone":'+XX XX XXXX', "tags":['tag_01'], "lat":XX.XXX, "lng":-X.XXX, "img":'pic_1.jpg'},
        {"title":'Place_2', "address":'XX Str City', "phone":'+XX XX XXXX', "tags":['tag_01','tag_02'], "lat":XX.XXX, "lng":-X.XXX, "img":'pic_2.jpg'}
    ]
}

General options

Place object attributes