PHP - Marcador Dinamico PHP MySQL en google maps

   
Vista:

Marcador Dinamico PHP MySQL en google maps

Publicado por siREZ (201 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.

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>
&nbsp;</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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Marcador Dinamico PHP MySQL en google maps

Publicado por xve (5519 intervenciones) el 14/05/2016 19:56:25
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Marcador Dinamico PHP MySQL en google maps

Publicado por siREZ (201 intervenciones) el 15/05/2016 16:03:13
gracias por tu respuesta. Analizando el enlace con él obtengp los datos de geolocalización.
hasta ahí todo biem. Mediante ajax y jquery llevo a PHP la lat y la lon....
Con estos datos busco que clientes se encuentran en un radio de 2 Km a la redonda. y muestro el mapa con centro en mi Lat y Lon que obtuve en el proceso anterior.
una vez alli, necesito crear los marcadores e incrustarlos en el mapa.

esa es mi inquietud.

gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

Marcador Dinamico PHP MySQL en google maps

Publicado por txema (41 intervenciones) el 15/05/2016 19:41:46
Hola siREZ:

La personalización de los marcadores (que entiendo es lo que quieres) es muy parecida a como trabajas el infowindow.

Sería algo así:
1
2
3
4
5
6
7
var imagen = new google.maps.MarkerImage('iconos/icomarker.png', new google.maps.Size(29, 38), new google.maps.Point(0, 0), new google.maps.Point(15, 38), new google.maps.Size(29, 38));
var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: 'Mi marcador es mi logo',
        icon: imagen
});

Tendíamos:
- La ruta de imagen creada como icono ( en este caso iconos/icomarker.png)
- El tamaño en píxeles del marcador (new google.maps.Size(29, 38))
- El punto superior izquierdo del píxel, desde el que mostramos la imagen/marcador (new google.maps.Point(0, 0))
- El punto de la imagen que ha de situarse sobre las coordenadas (new google.maps.Point(15, 38))
- El punto inferior derecho del píxel, de la imagen/marcador que mostramos (new google.maps.Size(29, 38))
- title es opcional (el texto aparecerá cuando situamos el cursor sobre el marcador)

La posición del marcador en el mapa ( position: latLng) Creo que en tu caso sería new google.maps.LatLng(coordenadas.Lat, coordenadas.Lng) que personalmente lo trataría como variable declarada previamente
1
var latLng = new google.maps.LatLng(coordenadas.Lat, coordenadas.Lng);

Esto lo puedes personalizar tanto en la posición/geolocalización como en los marcadores que llevas desde tu base de datos (obviamente personalizando los nombres de las imágenes/marcadores y la ruta de las mismas).
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Marcador Dinamico PHP MySQL en google maps

Publicado por siREZ (201 intervenciones) el 15/05/2016 22:17:47
Funciona perfecto y me lo has explicado muy bien....

muchas Gracias.


siREZ
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar