Avalados por :
Hi Everyone,
Estoy intentando usar un mashup de HTML en una de mis soluciones y este Mashup de HTML es para Google Maps para encontrar las direcciones entre dos lugares dados.
Para esto estoy utilizando el Servicio de direcciones - Google Maps JavaScript API v3 — Google Developers.
Desde el enlace anterior estoy extrayendo el código Javascript + Html y agregándolo a mi editor de código HTML mientras creo un nuevo Mashup de HTML.
Mi estructura de BO es:
Al lado de esto, he agregado un puerto de entrada en la pantalla .PTP con dos parámetros ya que debo enviar estos dos valores a mi aplicación Googlemaps para obtener la ruta/distancia.
Al lado de esto he agregado un portbinding y esa pantalla es
Después de esto estoy tratando de agregar el HTML Mashup y es el siguiente:
El código extraído del enlace de direcciones de Google especificado anteriormente es
<!DOCTYPE html><html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Servicio de direcciones</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script>var directionsDisplay;var directionsService = new google.maps.DirectionsService();var map;function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom:7, center: chicago } map = new
¿Puedes proporcionar todo el código HTML que estás utilizando aquí?
¿Alguna ayuda con esto? Estoy totalmente confundido sobre qué hacer a continuación para que esta aplicación en funcionamiento sea exitosa...
Agradezco la atención de cualquier persona en esto.
Saludos...
Hanu K
Hi,
I used the following, and it worked for me: Mine was an embedded HTML mashup on an embedded component of an OIF
(Note that the 2 parameters are set to -34.397, 150.644 in my code, and am using these parameters as variables in my script..
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style>
<script src=" https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false "></script>
<script>
var map;
function initialize() {
//Test by outputting variables to the console..this ensures that your Outport-Inport bindings are //correct
document.write("Hello World!");
document.write(sap.byd.ui.mashup.context.inport.ParameterZ );
document.write( sap.byd.ui.mashup.context.inport.ParameterT);
var mapOptions = { zoom: 8, center: new google.maps.LatLng
(sap.byd.ui.mashup.context.inport.ParameterZ,sap.byd.ui.mashup.context.inport.ParameterT)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
</div>
<div id="map-canvas"></div>
</body>
</html>
In some cases, we might also have an HTML form along with the javascript. In this case, the form parameters cannot be directly assigned with the value as shown above, because it would be interpreted directly as a string. In this case, we should be able to assign the value to this id field later as part of the script..
Code snippet from HTML form:
<input type="hidden" id="zoom" name="zoom" value="" >
<input type="hidden" id="mapType" name="mapType" value="" >
Note that there is an Id assigned, and the value is null. Later, in the javascript, we access this id, and assign a value to this using our context parameters.. eg:
Code snippet from javascript:
También puedes visitar mi blog sobre combinaciones de scripts HTML aquí: http://scn.sap.com/community/business-bydesign/studio/blog/2014/02/24/html-script-mashup--launched-f...
contacto@primeinstitute.com
(+51) 1641 9379
(+57) 1489 6964
© 2024 Copyright. Todos los derechos reservados.
Desarrollado por Prime Institute
