Marcador Dinamico PHP MySQL en google maps
Publicado por siREZ (203 intervenciones) el 14/05/2016 15:19:31
Cordial Saludo.
estoy implementando una agenda con geolocalizacion de los clientes
tengo en la BBDD la longitud y la latitud del cliente. Cuando inicia el programa, detecto las coordenadas del usuario y hago una consulta a la BBDD para localizar los clientes en un radio de 2 Millas a la redonda.
Hata aqui todo correcto.
Creo variables de session con la lon y lat de los clientes geolocalizados cerca al usuario.
luego debo mostrar el mapa de la zona, con google map y para ello debo incrustar los marcadores hallados en el paso anterior y que traigo en variable de sesion.
debo crear los marcadores con las variables $lat1, $lat2.... etc
mi código es el siguiente:
alguien me puede indicar como hacerlo?
o algun link que me de la orientacion adecuada...
gracias.
siREZ
estoy implementando una agenda con geolocalizacion de los clientes
tengo en la BBDD la longitud y la latitud del cliente. Cuando inicia el programa, detecto las coordenadas del usuario y hago una consulta a la BBDD para localizar los clientes en un radio de 2 Millas a la redonda.
Hata aqui todo correcto.
Creo variables de session con la lon y lat de los clientes geolocalizados cerca al usuario.
luego debo mostrar el mapa de la zona, con google map y para ello debo incrustar los marcadores hallados en el paso anterior y que traigo en variable de sesion.
1
2
3
4
5
6
$mi_lat = $_SESSION['latitud'];
$mi_lon = $_SESSION['langitud'];
$lat1 = $_SESSION['lat1'];
$lon1 = $_SESSION['lon1'];
$lat2 = $_SESSION['lat2'];
$lon2 = $_SESSION['lon2'];
debo crear los marcadores con las variables $lat1, $lat2.... etc
mi código es el siguiente:
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
<!DOCTYPE html>
<html>
<head>
<title>averiguo.com</title>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href='http://fonts.googleapis.com/css?family=Marcellus' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style>
* { margin: 0; padding: 0; }
html { height: 100%; }
body { background-image: url(images/old_map.png); font-size: 16px; font-family: 'Marcellus', serif; height: 100%; position: relative; }
header { background-color: rgba(0,0,0,.88); height: 80px; width: 100%; position: fixed; z-index: 99; box-shadow: 0px 2px 3px #333333; }
header > h1 { color: #FFFFFF; font-family: 'Marcellus', serif; font-size: 1.2em; font-weight: normal; margin: 30px 60px; }
#mapa { position: absolute; background: transparent; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; }
#informacion { position: absolute; background: rgba(0,16,27,.85); z-index: 200; top: 70%; width: 30%; padding: 12px; }
#informacion h2,
#informacion h3 { color: #FFFFFF; text-shadow: 1px 1px 1px #000000; font-weight: normal; font-size: .9em; }
#informacion h2 { font-size: 1.1em; margin-bottom: 10px; }
#informacion h3 span { color: #FF5555; }
</style>
<script type="text/javascript">
function informacion (coordenadas) {
$("#latitude").html(coordenadas.Lat);
$("#longitude").html(coordenadas.Lng);
}function iniciar() {
var coordenadas = {
Lat: 0,
Lng: 0 };function localizacion (posicion) {
coordenadas = {
Lat: posicion.coords.latitude,
Lng: posicion.coords.longitude
}informacion(coordenadas);
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(coordenadas.Lat, coordenadas.Lng),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}var map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
var infowindow = new google.maps.InfoWindow({
map: map,
position: new google.maps.LatLng(coordenadas.Lat, coordenadas.Lng),
content: 'Estas Aqui'
});
}function errores (error) {
alert('Ha ocurrido un error al intentar obtener la información');
}if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(localizacion,errores);
} else {
alert("Tu navegador no soporta o no tiene habilitada la 'Geolocalización'");
} }</script>
</head>
<body onLoad="iniciar()">
<header><table width="100%" border="0">
<tr>
<td bgcolor="#FFFFFF">
<div class="logo"> <a href="#"><img src="images/logo2.gif" alt="averiguo.com" width="239" height="63" border="0"></a></div>
</td>
</tr>
</table>
<div class="clear"></div>
</header>
<div id="mapa"></div>
</body>
</html>
alguien me puede indicar como hacerlo?
o algun link que me de la orientacion adecuada...
gracias.
siREZ
Valora esta pregunta
0
muchas Gracias.