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'} );*/