Google API into SC

Scriptcase 9 General
#1

Hi,
Has anyone integrated the Google API? and he managed to get the token from Google to access the various APIs, I don’t mean to use the two made available by SC, but all the Google APIs for example those of Firebase

#2

Hello…
i use the Google API form Google Maps
I’m only need insert a meta

$gmaps_token is my API Key, stored in a .ini file…

Then, simply use the code…

In this code, i read some markers, and draw a map…

$domains = array("127.0.0.1:8090", "localhost:8090", "192.168.1.213:8090"); 
$domain = $_SERVER['HTTP_HOST'];

$array_ini = parse_ini_file("..\\Config.ini");
$gmaps_token = $array_ini['GoogleKey'];
$act = 1;

$check_sql = "SELECT Cli.Nombre_Cliente, Cli.DOMICILIO_CLIENTE, Loc.NombreLocalidad,    Prv.Provincia, Prv.Cod_Provincia, Cli.Cod_Postal, Cli.TELEFONOS_CLIENTE, Cli.Cod_Cliente, Cli.Longitud, Cli.Latitud, Cli.EstadoClienteViaje 
 FROM Clientes AS Cli 
 Inner Join Localidades AS Loc On Loc.Cod_Postal = Cli.Cod_Postal   
 Inner Join Provincias as Prv on Loc.Cod_Provincia = Prv.Cod_Provincia
 Where Cli.Latitud <> '' AND Cli.Longitud <> '' AND Cli.Cod_Postal <> 9999
 Order by Cli.Cod_Cliente";
$string = '[';
sc_lookup(rs, $check_sql);
$counter = count({rs});
if (isset({rs[0][0]})) {
    for($i=0;$i<$counter;$i++){ 
		$full_address = trim({rs[$i][1]}). ', '.trim({rs[$i][2]}). ', '.trim({rs[$i][3]}). ', Argentina';
		if ($string <> '[') {
			$string .= ',';
		}
		$Status = {rs[$i][10]};
		if ($Status == ' ') {
			$Status = 'I';
		}
			
		$string .= '[ id="'.{rs[$i][7]}.'", name="'.trim({rs[$i][0]}).'", address="'.$full_address.'", lat="'.{rs[$i][9]}.'", lng="'.{rs[$i][8]}.'", type="", stats="'.$Status.'" ]';
	}
}
$string .= ']';

if ( !in_array($domain, $domains) ) { 
echo '
<style>
div.note
{
	 color: #616E14;
	 border: solid 1px #BFD62F;
	 background-color: #DAE691;
	 -moz-border-radius: 6px;
	 -webkit-border-radius: 6px;
	 border-radius: 6px;
	 padding: 14px 20px;
	 margin: 7px;
}
</style>
<div class="note">Mapa de Viaje</div>';
}

?> <!DOCTYPE html><html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Ruta de Viaje</title> 
	  sc_include_lib('Jquery');
	  sc_include_lib('jquery_thickbox');
	  <?php echo '<script type="text/javascript" src="'.sc_url_library("prj", "nosleep", "NoSleep.min.js").'"></script>'; ?>
	  <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=<?php echo $gmaps_token; ?>&v=3"></script>
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script type = "text/javascript"> 
	window.moveTo(0, 0);window.resizeTo(screen.width, screen.height)
	</script>
	  
	<script type="text/javascript">
	var directionsDisplay = null;
	var directionsService = null;
	var map,
            currentPositionMarker,
            mapCenter = new google.maps.LatLng(-37.84948448820082, -58.2599480025267),
            map;
	var geocoder;
	var infoWindow = new google.maps.InfoWindow;
		
	function initializeMap() {
		geocoder = new google.maps.Geocoder();
		var infoWindow = new google.maps.InfoWindow;
		var request = {
			travelMode: google.maps.DirectionsTravelMode['DRIVING'],
			unitSystem: google.maps.DirectionsUnitSystem['METRIC'],
		}; 
        map = new google.maps.Map(document.getElementById('map_canvas'), {
        	zoom: 5,
			center: mapCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
		getMarkers(map);		
	}	

	function getMarkers(map){
		var markers = <?php echo $string; ?>;
		for(var i = 0; i < markers.length; i++) {
  		 	(function() {
			var id = markers[i][0];
			var name = markers[i][1];
			var address = markers[i][2];
			var status = markers[i][6]; 
			var point = new google.maps.LatLng(
			  parseFloat(markers[i][3]),
			  parseFloat(markers[i][4]));
			
			if (status == 'L'){
			ico = "PhoneBlue.png";
			}else if(status == 'E'){
			ico = "TruckPurple.png";
			}else if(status == 'C'){
			ico = "BoxYellow.png";
			}else if(status == 'N'){
			ico = "CrossRed.png";
			}else if(status == 'I'){
			ico = "ClientGreen.png";
			}
			
			var infowincontent = document.createElement('div'+id);
			var strong = document.createElement('strong');
			strong.textContent = name;
			infowincontent.appendChild(strong);
			infowincontent.appendChild(document.createElement('br'));
			var text = document.createElement('text');
			text.textContent = address;
			infowincontent.appendChild(text);
			infowincontent.appendChild(document.createElement('br'));
			infowincontent.appendChild(document.createElement('br'));

			var createA = document.createElement('a');
			var createAText = document.createTextNode("Notas de Cliente");
			var funcA = "changeMarker("+id+")";
			createA.setAttribute('href', "#");
			createA.setAttribute('onclick', funcA);
			createA.appendChild(createAText);
			infowincontent.appendChild(createA);

			infowincontent.appendChild(document.createElement('br'));
			infowincontent.appendChild(document.createElement('br'));

			var createB = document.createElement('a');
			var createBText = document.createTextNode("Ficha de Cliente");
			var funcB = "EditaFichaCliente("+id+")";
			createB.setAttribute('href', "#");
			createB.setAttribute('onclick', funcB);
			createB.appendChild(createBText);
			infowincontent.appendChild(createB);

			infowincontent.appendChild(document.createElement('br'));
			infowincontent.appendChild(document.createElement('br'));

			var createC = document.createElement('a');
			var createCText = document.createTextNode("Estado del Cliente");
			var funcC = "EditaEstadoCliente("+id+")";
			createC.setAttribute('href', "#");
			createC.setAttribute('onclick', funcC);
			createC.appendChild(createCText);
			infowincontent.appendChild(createC);

			var marker = new google.maps.Marker({
				position: point,
				icon: "../_lib/img/"+ico,
				map: map
			});
			marker.addListener('click', function() {
				infoWindow.setContent(infowincontent);
				infoWindow.open(map, marker);
			});
		})();
	}}
		
	function CreateSpecialMarker(address, map, ico) {
		geocoder.geocode({ 'address': address }, function (results, status) {
		if (status == 'OK') {
			var marker = new google.maps.Marker({
				position: results[0].geometry.location,
				icon: "../_lib/img/"+ico,
				map: map}
			);
		}});	
	}	
	function doNothing() {}	 
		
	// Inicializa y abre el mapa
	function initLocationProcedure() {
		initializeMap();
	}
	// Markers Controls
	function changeMarker(marker_id){
			var strAppEdit = 'Form_EditNotasClientesMap';
			var LocalUrl = '../'+ strAppEdit +'/?Cod_Cliente='+marker_id+'&amp;?Cod_Viaje=0&amp;KeepThis=true&amp;';
			document.getElementById('TB_iframeContent').src = LocalUrl;
	}

	// Markers Controls
	function EditaFichaCliente(marker_id){
			var strAppEdit = 'Form_ClientesMapaGeneral';
			var LocalUrl = '../'+ strAppEdit +'/?Cod_Cliente='+marker_id+'&amp;?Cod_Viaje=0&amp;KeepThis=true&amp;';
			document.getElementById('TB_iframeContent').src = LocalUrl;
	}
		
		
	function EditaEstadoCliente(marker_id){
		var strAppEdit = 'control_CambiarEstadoCliente';
		var LocalUrl = '../'+ strAppEdit +'/?Cod_Cliente='+marker_id+'&amp;?Cod_Viaje=0&amp;KeepThis=true&amp;TB_iframe=true';
		tb_show('', LocalUrl, null);
		var tbwindow = document.getElementById('TB_window');
		tbwindow.setAttribute('style', 'width: 800px; height: 500px; text-align:center; top:10%; left:10%; display: block;');
		var tbframe = document.getElementById('TB_iframeContent');
		tbframe.setAttribute('style', 'width: 800px; height: 500px; text-align:center; top:10%; left:10%; display: block; ');
	} 

		// initialize the Map with jQuery
	$(document).ready(function() {
		initLocationProcedure();
	});	  
		

</script>
	  
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map_canvas {
        height: 90%;
      }
	  #controls, #routetitle{
			text-align: center;			
		  	width: 100%;
			padding: 5px 0;
		}
	  #activ{
	  	width: 100%;
		text-align: center;
	  }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
		/* CSS of the top menu */
		.topnav {
		  overflow: hidden;
		  background-color: #333;
		}

		.topnav a {
		  float: left;
		  display: block;
		  color: #f2f2f2;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		  font-size: 17px;
		}

		.topnav a:hover {
		  background-color: #ddd;
		  color: black;
		}

		.active {
		  background-color: #4CAF50;
		  color: white;
		}
		.paused {
		  background-color: #c2ca4f;
		  color: white;
		}
		.deliv {
		  background-color: #6479e2;
		  color: white;
		}
		.topnav .icon {
		  display: none;
		}

		@media screen and (max-width: 600px) {
		  .topnav a:not(:first-child) {display: none;}
		  .topnav a.icon {
			float: right;
			display: block;
		  }
		}

		@media screen and (max-width: 600px) {
		  .topnav.responsive {position: relative;}
		  .topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		  }
		  .topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		  }
		}
    </style>
  </head>

  <body>
	<div id="map_canvas" style="float: left; width: 50%; height: 100%; position: relative; overflow: hidden;"> </div>
	<div id="EditClientes" style="float:right;width:50%;height:100%;text-align:left"><iframe id="TB_iframeContent" style="width:100%;height: 100%; position: relative; overflow: hidden;" frameborder="0" > </iframe></div>
  </body>
</html>
<?php
#3

Hi,
my probelam is to receive token to handle API calls.
you use the old method with the key but for firebeas this method has been deprecated and will be closed in a few days.
I tried to integrate the Google libraries but I can’t work in SC