Funciona en Local Host pero no en hosting
Publicado por Deeo (1 intervención) el 02/03/2017 20:32:02
Gente, haber si alguien me puede ayudar...
Tengo un archivo HTML al que le paso 2 parámetros... latitud y longitud...
(?latitude=-11.956821&longitude=-77.0798796)
El HTML si lo ejecuto en mi pc funciona de maravillas, lo que hace es unir tu hubicacion actual basada en HTML5 y la latitud y longitud pasadas en googlemaps, el famoso "como llegar?", este es el código completo dentro del html y el parametro para pasarle seria....
?latitude=-11.956821&longitude=-77.0798796
Desde ya muchas gracias por su ayuda....
Tengo un archivo HTML al que le paso 2 parámetros... latitud y longitud...
(?latitude=-11.956821&longitude=-77.0798796)
El HTML si lo ejecuto en mi pc funciona de maravillas, lo que hace es unir tu hubicacion actual basada en HTML5 y la latitud y longitud pasadas en googlemaps, el famoso "como llegar?", este es el código completo dentro del html y el parametro para pasarle seria....
?latitude=-11.956821&longitude=-77.0798796
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<script>
function obtenerVariables( name ){
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp ( regexS );
var tmpURL = window.location.href;
var results = regex.exec( tmpURL );
if( results == null )
return"";else
return results[1];
}function initMap() {
navigator.geolocation.getCurrentPosition(function (position) {
var origin = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude
);var valor1 = obtenerVariables( 'latitude' );
var valor2 = obtenerVariables( 'longitude' );
var destination = new google.maps.LatLng(
valor1, valor2 );createMap(origin, destination);
}, onError);
}var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}}function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}function createMap(origin, destination) {
var mapData = {
zoom: 13,
center: origin,
mapTypeId: google.maps.MapTypeId.ROADMAP
}// creamos el mapa y el marcador
var map = new google.maps.Map(document.getElementById('map'), mapData);
var originMarker = createMarker(map, origin, 'Tu estás aquí');
var destinationMarker = createMarker(map, destination, 'Estamos aquí', true);
// vamos a dibujar la ruta cuando se haga click en '¿Cómo llegar?'var howArrive = document.getElementById('how-arrive');
howArrive.addEventListener('click', function() {
drawRoute(map, origin, destination);
originMarker.setMap(null);
destinationMarker.setMap(null);
});
}function createMarker(map, position, title, isDestination) {
var marker = new google.maps.Marker({
map: map,
draggable: true, // permite moverse
animation: google.maps.Animation.BOUNCE,
position: position,
title: title});
// si se va a crear el marcador destino, entonces// se le pone un marcador personalizado (amarillo)
if(isDestination) {
marker.setIcon('https://i.imgur.com/TFDuAHr.png?1');
}return marker;
}function drawRoute(map, origin, destination) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
// puedes escoger entre 'WALKING', 'TRANSIT' y 'BICYCLING'
travelMode: 'DRIVING'
}, function(response, status) {
if(status === 'OK') {
directionsDisplay.setDirections(response);
} else {
alert('No se pudo establecer el recorrido. ', status);
}});
}function onError(err) {
console.log(err);
}</script>
<style>
#map {
height: 500px; margin: 20px auto;max-width: 700px;
width: 100%;
}.map {
position: relative;}/* simula los estilos de google maps */button {background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
border: none; cursor: pointer;font-family: 'segoe ui';
font-size: 12px;
left: 43%;
padding: .5rem .8rem;
position: absolute; top: 10px;z-index: 2;
}button:hover {
background-color: #ddd;
}button:focus {
outline: none;}</style>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<script async defer src="https://maps.googleapis.com/maps/api/js?"></script>
</head>
<body onload="initMap()">
<section class="map">
<button id="how-arrive">¿Cómo llegar?</button>
<div id="map"></div>
</section>
</body>
</html>
Desde ya muchas gracias por su ayuda....
Valora esta pregunta
0