Basic examples


Standart map


HTML:

   
<div class="" id='property-map-plugin-1'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-1');
    map_near.near_places();
    map_near.near_places('setMarker', {ltng :[45.812231, 15.920618]});
                

Standart map with custom style


HTML:

   
<div class="" id='property-map-plugin-2'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-2');
    map_near.near_places({
        'mapOptions': {
                styles: [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}],
            }
    });
    map_near.near_places('setMarker', {ltng :[45.812231, 15.920618], 'address':'Ilica 345, HR-10000'});
                

Standard map with custom zoom


HTML:

   
<div class="" id='property-map-plugin-3'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-3');
    map_near.near_places({
        'mapOptions': {
                'zoom' : 10,
            }
    });
    map_near.near_places('setMarker', {ltng :[45.812231, 15.920618], 'address':'Ilica 345, HR-10000'}););
                

Standard map with custom radius


HTML:

   
<div class="" id='property-map-plugin-4'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-4');
    map_near.near_places({
        'mapOptions': {
                'zoom' : 10,
                'radius' : 50000,
            }
    });
    map_near.near_places('setMarker', {ltng :[45.812231, 15.920618], 'address':'Ilica 345, HR-10000'});
                

Standard map with example translate text to Croatian


HTML:

   
<div class="" id='property-map-plugin-5'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-5');
map_near.near_places({
    'translatable': {
            'Health' : 'Zdravlje',
            'PetrolPump' : 'Benzinska crpka',
            'Restaurant' : 'Restoran',
            'ATMBank' : 'Bankomata',
            'Store' : 'Dućan',
            'Distance' : 'Udaljenost',
            'Address' : 'Adresa',
            'WalkingTime' : 'Vrijeme hodanja',
            'Details' : 'Detalji',
        }
});
map_near.near_places('setMarker', {ltng :[45.812231, 15.920618], 'address':'Ilica 345, HR-10000'});
                

Change marker



HTML:

   
<div class="" id='property-map-plugin-6'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-6');
    map_near.near_places();
    map_near.near_places('setMarker', {ltng :[45.812231, 15.920618], 'address':'Ilica 345, HR-10000'});

    $('#plugin-6-change-marker').on('click',function(){
        map_near.near_places('setMarker', {ltng :[45.812204, 15.898712], 'address':'HR-10000'});
    })
                

Add custom Location



HTML:

   
<div class="" id='property-map-plugin-7'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-7');
    map_near.near_places();
    map_near.near_places('setMarker', {ltng :[45.812231, 15.920618], 'address':'Ilica 345, HR-10000'});

    // add Custom location
    
    map_near.near_places('addLocation', {ltng :[45.812635, 15.917279], 'title':'Your title', 'icon':'Custom marker url', 'address': 'Defined address'});
    
    // Delete custom Places
    map_near.near_places('clearCustomPlaces');
    
                

Add custom Category with location



HTML:

   
<div class="" id='property-map-plugin-8'></div>
                

JS:

                        
var map_near = $('#property-map-plugin-8');
map_near.near_places();
map_near.near_places('setMarker', {ltng :[45.812231, 15.920618], 'address':'Ilica 345, HR-10000'});

var  markers_array = [
    {ltng:[45.810141, 15.924699], 'title':'Panda', 'address':'Roginina ul. 12-28, HR', 'icon':'http://iconshow.me/media/images/social/Circle-Icons-Pack-add-on-2/png/32/pizza.png'},
    {ltng:[45.813615, 15.916299], 'title':'Panda', 'address':'Rogin ul. 28, HR', 'icon':'http://iconshow.me/media/images/social/Circle-Icons-Pack-add-on-2/png/32/pizza.png'},
    {ltng:[45.819141, 15.929699], 'title':'Pizza', 'address':'Roginina ul. 15-28, HR', 'icon':'http://iconshow.me/media/images/social/Circle-Icons-Pack-add-on-2/png/32/pizza.png'},
    {ltng:[45.810655, 15.918259], 'title':'Pizza', 'icon':'http://iconshow.me/media/images/social/Circle-Icons-Pack-add-on-2/png/32/pizza.png'}
];

var  markers_array2 = [
    {ltng:[45.811141, 15.926099], 'title':'Shop', 'address':'Roginina ul. 12-28, HR', 'icon':'http://picture-cdn.wheretoget.it/gwazxu-i.jpg'},
    {ltng:[45.813615, 15.915299], 'title':'Shop', 'address':'Rogin ul. 28, HR', 'icon':'http://picture-cdn.wheretoget.it/gwazxu-i.jpg'},
    {ltng:[45.814141, 15.929699], 'title':'Shop', 'address':'Roginina ul. 15-28, HR', 'icon':'http://picture-cdn.wheretoget.it/gwazxu-i.jpg'},
    {ltng:[45.812655, 15.917259], 'title':'Shop', 'icon':'http://picture-cdn.wheretoget.it/gwazxu-i.jpg'}
];

/* Add new category and locations into categories */
/*
param.title - Title of category
param.piza_index - key should be uniq
param.icon  - (option) url for icon
*/

// add New category Piza
map_near.near_places('addCustomCategory',{'title':'Piza', 'index':'piza_index', 'icon':'http://iconshow.me/media/images/social/Circle-Icons-Pack-add-on-2/png/32/pizza.png'} );


// add lcoation into category with index "piza_index"
map_near.near_places('addLocationTo',{'index':'piza_index', 'location': {ltng:[45.810141, 15.924699], 'title':'Panda', 'address':'Roginina ul. 12-28, HR', 'icon':'http://iconshow.me/media/images/social/Circle-Icons-Pack-add-on-2/png/32/pizza.png'}});

// add lcoation into category with index "piza_index" via array
$.each(markers_array, function(key,val) {
    map_near.near_places('addLocationTo',{'index':'piza_index', 'location': val});
})

// add New category Shop
map_near.near_places('addCustomCategory',{'title':'Shop', 'index':'shop_index', 'icon':'http://picture-cdn.wheretoget.it/gwazxu-i.jpg'} );

//add lcoation into category with index "piza_index" via array
$.each(markers_array2, function(key,val) {
    map_near.near_places('addLocationTo',{'index':'shop_index', 'location': val});
})
// Clear  Location from Custom category
/*map_near.near_places('clearCustomCategory',{'index':'shop_index'} );*/