¡Caminando hacia el éxito!

Aprende en Comunidad

Avalados por :

Como usar um Mashup de HTML com Google Maps para encontrar endereços

  • Creado 01/03/2024
  • Modificado 01/03/2024
  • 2 Vistas
0
Cargando...

Olá a todos,

Estou tentando usar um mashup de HTML em uma das minhas soluções e este Mashup de HTML é para o Google Maps para encontrar direções entre dois locais dados.

Para isso, estou utilizando o Serviço de direções - Google Maps JavaScript API v3 — Google Developers.

A partir do link acima, estou extraindo o código Javascript + Html e adicionando ao meu editor de código HTML enquanto crio um novo Mashup de HTML.

Minha estrutura de BO é:

Além disso, adicionei uma entrada na tela .PTP com dois parâmetros, pois preciso enviar esses dois valores para a minha aplicação Google Maps para obter a rota/distância.

Junto a isso, adicionei um portbinding e essa tela é

Depois disso, estou tentando adicionar o HTML Mashup e é o seguinte:

O código extraído do link de direções do Google especificado anteriormente é

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">    <meta charset="utf-8">    <title>Serviço de direções</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    
            
Pedro Pascal
Se unió el 07/03/2018
Pinterest
Telegram
Linkedin
Whatsapp

4 Respuestas

0
Cargando...

Você pode fornecer todo o código HTML que está utilizando aqui?

Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
0
Cargando...

Precisa de ajuda com isso? Estou completamente confuso sobre o que fazer a seguir para tornar este aplicativo em funcionamento bem-sucedido...

Agradeço a atenção de qualquer pessoa sobre isso.

Saudações...
Hanu K

Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
0
Cargando...

Olá,

Eu usei o seguinte e funcionou para mim: O meu era um mashup HTML incorporado em um componente incorporado de um OIF

(Note que os 2 parâmetros estão definidos como -34.397, 150.644 no meu código, e estou usando esses parâmetros como variáveis no meu script..

<!DOCTYPE html>

<html>

<head>

<title>Mapa Simples</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() {

//Teste imprimindo variáveis no console..isso garante que suas ligações de Outport-Inport estão corretas

document.write("Olá Mundo!");

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>

Em alguns casos, também podemos ter um formulário HTML junto com o javascript. Neste caso, os parâmetros do formulário não podem ser atribuídos diretamente com o valor como mostrado acima, porque seria interpretado diretamente como uma string. Neste caso, devemos ser capazes de atribuir o valor a este campo de id mais tarde como parte do script..

Trecho de código do formulário HTML:

<input type="hidden" id="zoom" name="zoom" value="" >

<input type="hidden" id="mapType" name="mapType" value="" >

Note que há um Id atribuído, e o valor é nulo. Mais tarde, no javascript, acessamos este id e atribuímos um valor a ele usando nossos parâmetros de contexto.. por exemplo:

Trecho de código do javascript:

Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019

contacto@primeinstitute.com

(+51) 1641 9379
(+57) 1489 6964

© 2024 Copyright. Todos los derechos reservados.

Desarrollado por Prime Institute

¡Hola! Soy Diana, asesora académica de Prime Institute, indícame en que curso estas interesado, saludos!
Hola ¿Puedo ayudarte?