Eu preciso gerar uma rota pela Google Maps. Eu peguei o exemplo do Google Developer e entendi bem o mecanismo, porém preciso fazer algumas alterações;
1 - Preciso fazer com que o "gatilho", da geração da rota seja gerado imediatamente quando o html é aberto na tela. Então eu preciso configurar isso em um evento "onShow" ou em algum equivalente, mas não sei como fazer em Javascript.
2 - Eu vou integrar com o Delphi, então as variáveis virão de lá. Mas pra efeito de testes, eu vou passar umas constantes mesmo. Então, evidentemente não terá o select e o "document.getElementById", terá que funcionar de uma forma fixa. Como fazer isso?
Abaixo estou postado o fonte do Google Developer. Alguém pode me dar sugestões de como adaptá-lo para a minha necessidade?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="sorocaba, sp">Sorocaba</option>
<option value="itu, sp">Itu</option>
<option value="barueri, sp">Barueri</option>
<option value="são paulo, sp">São Paulo</option>
</select>
<b>End: </b>
<select id="end">
<option value="sorocaba, sp">Sorocaba</option>
<option value="itu, sp">Itu</option>
<option value="barueri, sp">Barueri</option>
<option value="são paulo, sp">São Paulo</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
waypoints: [{location: 'Rodoviária, Campinas'}, {location: 'Moisés Lucarelli, Campinas'}],
destination: document.getElementById('end').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&callback=initMap">
</script>
</body>
</html>
Primeira mente eu gostaria de pedir desculpa se eventualmente eu estiver postando na área errada sou novo aqui e pegarei o jeito logo logo.
estou desenvolvendo uma aplicação web que possibilita o cadastro do cliente bem como seu endereço e estou em busca de uma solução para na pagina que mostra os dados do cliente selecionado abrir um mapa com a localização de seu endereço a partir dos dados de endereço que tenho registrado no bando de dados.
alguém poderia me indicar uma solução pra eu estudar e implementar?
No carregamento da página eu coloco alguns pontos no mapa.
Mas depois, recebo um evento via WebService que devo colocar mais um ponto.
E não funciona da forma como to fazendo porque o objeto não ta mais instanciado neste momento.
Teria como eu vincular um objeto a uma variável JS pra poder setar um ponto a mais?
tentei via #map (map é o div do mapa) e não deu certo
Também tentei passar a variável pra fora da função pra poder ser enchergada por toda a página
mas daí o mapa não aparece
Estou usando um código JavaScript que usa a latitude e longitude para gerar os valores:
sw_lat sw_lng
ne_lat ne_lng
Após o JavaScript usar a latitude e longitude é gerado os valores para sw_lat, sw_lng, ne_lat, ne_lng para fazer um http request. A url é formada com os pametros:
Estou com um codigo javascript do google maps funcionando perfeitamente (exibe os marcadores personalizados, cordenadas, nomes etc de um array list). porém, preciso que quando clicado no icone (pin ou marcador) abra um window com o nome, e link assim que clicado.
alguem pode me ajudar nessa ai? segue o codigo completo:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
scrollwheel: false,
zoomControl : true,
panControl : false,
//streetViewControl : true,
mapTypeControl: false,
//overviewMapControl: true,
center: {lat: -19.4710913, lng: -42.5563031}
//center: {lat: -5.18229664, lng: -37.35511959}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var lista = [
['Bondi Beach', -19.457739, -42.555077, 1,'images/pin.png'],
['Coogee Beach', -19.455503, -42.554980, 2,'images/pin.png'],
['Cronulla Beach', -19.448637, -42.555208, 3,'images/pin.png']
];
function setMarkers(map) {
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < lista.length; i++) {
var anuncio = lista[i];
//----------------------------------------------
var marker = new google.maps.Marker({
position: {lat: anuncio[1], lng: anuncio[2]},
map: map,
icon: anuncio[4],
shape: shape,
title: anuncio[0],
// zIndex: anuncio[3]
});
//---------------------------------------------
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>