Penwell Posted February 22, 2020 Share Posted February 22, 2020 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(); }); Quote Link to comment https://forums.phpfreaks.com/topic/310109-google-maps-with-multiple-markers-from-array/ Share on other sites More sharing options...
requinix Posted February 23, 2020 Share Posted February 23, 2020 Have you written the Javascript code necessary to add one marker to the map? Quote Link to comment https://forums.phpfreaks.com/topic/310109-google-maps-with-multiple-markers-from-array/#findComment-1574790 Share on other sites More sharing options...
Penwell Posted February 23, 2020 Author Share Posted February 23, 2020 8 hours ago, requinix said: Have you written the Javascript code necessary to add one marker to the map? No not yet thats what i need help with as you can see from the map script there are currently no markers Quote Link to comment https://forums.phpfreaks.com/topic/310109-google-maps-with-multiple-markers-from-array/#findComment-1574800 Share on other sites More sharing options...
requinix Posted February 23, 2020 Share Posted February 23, 2020 Making a simple Marker is pretty simple. Check out the documentation and get just one marker on the map. It doesn't need to be real data. You can even hardcode the location. Get the basic marker there, then perhaps also work with the settings to customize it to look the way you want. Then add the popup tooltip functionality to it. Again, hardcode the information. Work with it, customize it, etc. Separate from that is getting the GPS data onto the page in a useful way. Do you have the map set up on the page yet? Where you want, how you want it? I don't see it in that index.php page... Quote Link to comment https://forums.phpfreaks.com/topic/310109-google-maps-with-multiple-markers-from-array/#findComment-1574802 Share on other sites More sharing options...
Penwell Posted February 23, 2020 Author Share Posted February 23, 2020 3 hours ago, requinix said: Making a simple Marker is pretty simple. Check out the documentation and get just one marker on the map. It doesn't need to be real data. You can even hardcode the location. Get the basic marker there, then perhaps also work with the settings to customize it to look the way you want. Then add the popup tooltip functionality to it. Again, hardcode the information. Work with it, customize it, etc. Separate from that is getting the GPS data onto the page in a useful way. Do you have the map set up on the page yet? Where you want, how you want it? I don't see it in that index.php page... 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(); }); Quote Link to comment https://forums.phpfreaks.com/topic/310109-google-maps-with-multiple-markers-from-array/#findComment-1574813 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.