Penwell

Yes i already have my map setup the way i want it to be displayed var handleGoogleMapSetting = function() { "use strict"; var mapDefault; var mapOptions = { zoom: 14, center: new google.maps.LatLng(-00.297106, 00.119429), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, }; mapDefault = new google.maps.Map(document.getElementById('google-map-default'), mapOptions); $(window).resize(function() { google.maps.event.trigger(mapDefault, "resize"); }); var defaultMapStyles = []; var flatMapStyles = [{"stylers":[{"visibility":"off"}]},{"featureType":"road","stylers":[{"visibility":"on"},{"color":"#ffffff"}]},{"featureType":"road.arterial","stylers":[{"visibility":"on"},{"color":"#fee379"}]},{"featureType":"road.highway","stylers":[{"visibility":"on"},{"color":"#fee379"}]},{"featureType":"landscape","stylers":[{"visibility":"on"},{"color":"#f3f4f4"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#7fc8ed"}]},{},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#83cead"}]},{"elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"weight":0.9},{"visibility":"off"}]}]; var turquoiseWaterStyles = [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill"},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#7dcdcd"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]}]; var icyBlueStyles = [{"stylers":[{"hue":"#2c3e50"},{"saturation":250}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":50},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}]; var oldDryMudStyles = [{"featureType":"landscape","stylers":[{"hue":"#FFAD00"},{"saturation":50.2},{"lightness":-34.8},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFAD00"},{"saturation":-19.8},{"lightness":-1.8},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FFAD00"},{"saturation":72.4},{"lightness":-32.6},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFAD00"},{"saturation":74.4},{"lightness":-18},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00FFA6"},{"saturation":-63.2},{"lightness":38},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#FFC300"},{"saturation":54.2},{"lightness":-14.4},{"gamma":1}]}]; var cobaltStyles = [{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":10},{"lightness":10},{"gamma":0.8},{"hue":"#293036"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#293036"}]}]; var darkRedStyles = [{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":10},{"lightness":10},{"gamma":0.8},{"hue":"#000000"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#293036"}]}]; $('[data-map-theme]').click(function() { var targetTheme = $(this).attr('data-map-theme'); var targetLi = $(this).closest('li'); var targetText = $(this).text(); var inverseContentMode = false; $('#map-theme-selection li').not(targetLi).removeClass('active'); $('#map-theme-text').text(targetText); $(targetLi).addClass('active'); switch(targetTheme) { case 'flat': mapDefault.setOptions({styles: flatMapStyles}); break; case 'turquoise-water': mapDefault.setOptions({styles: turquoiseWaterStyles}); break; case 'icy-COLOR_BLUE': mapDefault.setOptions({styles: icyBlueStyles}); break; case 'cobalt': mapDefault.setOptions({styles: cobaltStyles}); inverseContentMode = true; break; case 'old-dry-mud': mapDefault.setOptions({styles: oldDryMudStyles}); break; case 'dark-red': mapDefault.setOptions({styles: darkRedStyles}); inverseContentMode = true; break; default: mapDefault.setOptions({styles: defaultMapStyles}); break; } if (inverseContentMode === true) { $('#content').addClass('content-inverse-mode'); } else { $('#content').removeClass('content-inverse-mode'); } }); }; var MapGoogle = function () { "use strict"; return { //main function init: function () { handleGoogleMapSetting(); } }; }(); $(document).ready(function() { MapGoogle.init(); });

No not yet thats what i need help with as you can see from the map script there are currently no markers

I am trying to add markers on my google maps which will show the location of all users with the status “active” and on click of the marker it displays the following results from the arrays i am getting over API login status gps This is my index.php file <!DOCTYPE html> <html> <body> <?php $api_url = 'xxxx'; // please set your x URL $admin_login = "xxxx"; // x administrator login $admin_password = "xxxx"; // administrator password $api = new SplynxAPI($api_url); $api->setVersion(SplynxApi::API_VERSION_2); $isAuthorized = $api->login([ 'auth_type' => SplynxApi::AUTH_TYPE_ADMIN, 'login' => $admin_login, 'password' => $admin_password, ]); if (!$isAuthorized) { exit("Authorization failed!\n"); } $customerApiUrl = "admin/customers/customer/"; print "<pre>"; $result_customers = $api->api_call_get($customerApiUrl); $customers_list = $api->response; if ($result_customers) { } else { print "Fail! Error code: $api->response_code\n"; print_r($api->response); } ?> <table> <thead align="left" style="display: table-header-group"> <tr> <th>CLIENT</th> <th>STATUS</th> <th>GPS</th> </tr> </thead> <tbody> <?php foreach($customers_list as $item) :?> <tr class="item_row"> <td> <?php echo $item['login']; ?></td> <td> <?php echo $item['status']; ?></td> <td> <?php echo $item['gps']; ?></td> </tr> <?php endforeach;?> </tbody> </table> </body> </html> This is the output result |CLIENT|STATUS|GPS| |---|---|---| | user1@example.com| active| -00.269704939193858,00.085300236009065| | user2@example.com| active| -00.29697452399767,00.120804981797505| But now i need this to generate the google maps markers on the map and this is my map below var handleGoogleMapSetting = function() { "use strict"; var mapDefault; var mapOptions = { zoom: 14, center: new google.maps.LatLng(-00.297106, 00.119429), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, }; mapDefault = new google.maps.Map(document.getElementById('google-map-default'), mapOptions); $(window).resize(function() { google.maps.event.trigger(mapDefault, "resize"); }); var defaultMapStyles = []; var flatMapStyles = [{"stylers":[{"visibility":"off"}]},{"featureType":"road","stylers":[{"visibility":"on"},{"color":"#ffffff"}]},{"featureType":"road.arterial","stylers":[{"visibility":"on"},{"color":"#fee379"}]},{"featureType":"road.highway","stylers":[{"visibility":"on"},{"color":"#fee379"}]},{"featureType":"landscape","stylers":[{"visibility":"on"},{"color":"#f3f4f4"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#7fc8ed"}]},{},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#83cead"}]},{"elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"weight":0.9},{"visibility":"off"}]}]; var turquoiseWaterStyles = [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill"},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#7dcdcd"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]}]; var icyBlueStyles = [{"stylers":[{"hue":"#2c3e50"},{"saturation":250}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":50},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}]; var oldDryMudStyles = [{"featureType":"landscape","stylers":[{"hue":"#FFAD00"},{"saturation":50.2},{"lightness":-34.8},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFAD00"},{"saturation":-19.8},{"lightness":-1.8},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FFAD00"},{"saturation":72.4},{"lightness":-32.6},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFAD00"},{"saturation":74.4},{"lightness":-18},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00FFA6"},{"saturation":-63.2},{"lightness":38},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#FFC300"},{"saturation":54.2},{"lightness":-14.4},{"gamma":1}]}]; var cobaltStyles = [{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":10},{"lightness":10},{"gamma":0.8},{"hue":"#293036"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#293036"}]}]; var darkRedStyles = [{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":10},{"lightness":10},{"gamma":0.8},{"hue":"#000000"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#293036"}]}]; $('[data-map-theme]').click(function() { var targetTheme = $(this).attr('data-map-theme'); var targetLi = $(this).closest('li'); var targetText = $(this).text(); var inverseContentMode = false; $('#map-theme-selection li').not(targetLi).removeClass('active'); $('#map-theme-text').text(targetText); $(targetLi).addClass('active'); switch(targetTheme) { case 'flat': mapDefault.setOptions({styles: flatMapStyles}); break; case 'turquoise-water': mapDefault.setOptions({styles: turquoiseWaterStyles}); break; case 'icy-COLOR_BLUE': mapDefault.setOptions({styles: icyBlueStyles}); break; case 'cobalt': mapDefault.setOptions({styles: cobaltStyles}); inverseContentMode = true; break; case 'old-dry-mud': mapDefault.setOptions({styles: oldDryMudStyles}); break; case 'dark-red': mapDefault.setOptions({styles: darkRedStyles}); inverseContentMode = true; break; default: mapDefault.setOptions({styles: defaultMapStyles}); break; } if (inverseContentMode === true) { $('#content').addClass('content-inverse-mode'); } else { $('#content').removeClass('content-inverse-mode'); } }); }; var MapGoogle = function () { "use strict"; return { //main function init: function () { handleGoogleMapSetting(); } }; }(); $(document).ready(function() { MapGoogle.init(); });

Thanks a lot this works great now

Can you please show me how to do this on my code. Im still new with PHP and im not sure how to apply this on my code above

I have this php file which i use to get downloaded and uploaded data usage from my splynx radius server over API which outputs it as bytes making a very long string which i want to shorten into Mbps and from the arrays that i get from splynx server i would like help to convert the array "in_bytes" and "out_bytes" to MB. This is my whole code below. currently the output is in bytes and i need it to be in MB <?php $api_url = 'https://xxx/'; // Splynx URL $admin_login = "xxx"; // administrator login $admin_password = "xxx"; // administrator password $api = new SplynxAPI($api_url); $api->setVersion(SplynxApi::API_VERSION_2); $isAuthorized = $api->login([ 'auth_type' => SplynxApi::AUTH_TYPE_ADMIN, 'login' => $admin_login, 'password' => $admin_password, ]); if (!$isAuthorized) { exit("Authorization failed!\n"); } $customerApiUrl_online = "admin/customers/customers-online"; $customers_params = [ 'main_attributes' => [ 'status' => ['IN', ['active', 'blocked']] ]]; $result_online = $api->api_call_get($customerApiUrl_online); $customers_online = $api->response; ?> <table class="table table-transparent"> <thead> <tr> <th>DOWNOAD</th> <th>UPLOAD</th> </tr> </thead> <tbody> <?php foreach($customers_online as $item) :?> <tr> <td><?php echo $item['in_bytes']; ?></td> <td><?php echo $item['out_bytes']; ?></td> </tr> <?php endforeach;?> </tbody> </table>