Ayuda con google maps y base de datos

Campesino · #1 (**permalink**) 12/05/2010, 05:56

Hola:
Tengo una base de datos donde hay dos registros con la longitud y latitud y quiero colocar, en una web, un mapa (google map) con esos parametros. Estoy haciendo pruebas pero no me sale nada:

<?php
function conectar()
{
$base_de_datos = "basededatos";
$db_usuario = "root";
$db_password = "";

if (!($link = mysql_connect("localhost", $db_usuario, $db_password)))
{
echo "Error conectando a la base de datos.";
exit();
}
if (!mysql_select_db($base_de_datos, $link))
{
echo "Error seleccionando la base de datos.";
exit();
}
return $link;
}

$db = conectar();
$resultados = mysql_query("SELECT * FROM tabla WHERE id='38'");
while($articulo=mysql_fetch_array($resultados)) {

echo"

<script

src=http://maps.google.com/maps?file=api&v=2&kAQUI-TU-CLAVE-GOOGLE-MAPSLbIx-A type=text/javascript></script>
<script type=text/javascript>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(map));
map.setCenter(new GLatLng(), 17);
map.addControl(new GLargeMapControl(".$articulo['Latitud'].",".$articulo['Longitud'].")); map.setMapType(G_SATELLITE_MAP);

var point = new GPoint (".$articulo['Longitud'].",".$articulo['Latitud'].");
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload=load() onunload=GUnload()>
<div id=map style=width: 615px; height: 400px></div>

";
}
?>

Esto está bien o es una aberración, tened en cuenta que estoy aprendiendo.

GatorV · #2 (**permalink**) 12/05/2010, 08:34

Tema movido desde PHP a Javascript

Campesino · #3 (**permalink**) 14/05/2010, 12:49

¿ Nadie me va a hechar una mano ?

Nisrokh · #4 (**permalink**) 14/05/2010, 22:55

que es lo que no te sale? no se visualiza el mapa? o se visualiza el mapa pero no aparece el marcador?

Campesino · #5 (**permalink**) 15/05/2010, 04:26

Se queda en blanco no sale ni mapa ni nada

Nisrokh · #6 (**permalink**) 15/05/2010, 08:04

En la parte que incluis el script de Google... ¿Estás usando tu clave de la API?

Código HTML:

Ver original<script src="http://maps.google.com/maps?file=api&v=2&k=AQUI-TU-CLAVE-GOOGLE-MAPSLbIx-A" type="text/javascript"></script>

Donde dice AQUI-TU-CLAVE-GOOGLE me imagino que estás utilizando tu clave, ¿No?

Campesino · #7 (**permalink**) 16/05/2010, 13:45

Claro que si

Nisrokh · #8 (**permalink**) 17/05/2010, 15:02

Mire bien tu vodigo y note algunos errores...

1. Cuando seleccionas el div del map, tenes q ponerlo como string: document.getElementById('map')
2. En map.setCenter() te faltan las cordenadas en GLatLng()
3. Cuando pasas la clave por método GET incluyendo el script de Google, debe ser "key=TU_CLAVE". Vi que tenías "k=TU_CLAVE"

Acá te dejo un ejemplo para que veas como te tendria que quedar... Y asi me anduvo... Reemplaza la clave por la tuya.

Código HTML:

Ver original<html>
    <head>
        <title></title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
        <script type="text/javascript">
            //<![CDATA[
            function initialize() {
                if (GBrowserIsCompatible()) {
                    var map = new GMap2(document.getElementById('map_canvas'));
                    map.setCenter(new GLatLng(37.4419, -122.1419), 17);
                    map.addControl(new GLargeMapControl(37.4419, -122.1419));
                    map.setMapType(G_SATELLITE_MAP);
                    
                    var point = new GPoint(-122.1419, 37.4419);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                }
            }
            //]]>
        </script>
    </head>
    <body onload="initialize()" onunload="GUnload()">
        <div id="map_canvas" style="width: 400px; height: 200px;"></div>
    </body>
</html>

Te quedaría adaptarlo a tus necesidades, y reemplazar las coordenadas, por las variables... Ej. <?php $var ?>

¡Saludos!

Campesino · #9 (**permalink**) 20/05/2010, 02:58

Gracias Nisrokh, ahora me surge el problema que las variables no las reconoce, las saco de una base de datos, este es el script:

<?php
function conectar()
{
$base_de_datos = "Mi base de datos";
$db_usuario = "usuario";
$db_password = "pasw.";

if (!($link = mysql_connect("localhost", $db_usuario, $db_password)))
{
echo "Error conectando a la base de datos.";
exit();
}
if (!mysql_select_db($base_de_datos, $link))
{
echo "Error seleccionando la base de datos.";
exit();
}
return $link;
}

$db = conectar();
$resultados = mysql_query("SELECT * FROM tabla WHERE id='38'");
while($articulo=mysql_fetch_array($resultados))
?>
<html>
<head>
<title></title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQ IAAAAIxQWpU1-QF8PtuHoL59_tBRlJPYwn47xzjqwfW1L972ysqJV7hTeTtJFq6 w4AZdwjiz5j_tNLbIx-A" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map_canvas'));
map.setCenter(new GLatLng(<?php ".$articulo['Latitud']."?>,<?php ".$articulo['Longitud']."?>), 17);
map.addControl(new GLargeMapControl(<?php ".$articulo['Latitud']."?>,<?php ".$articulo['Longitud']."?>));
map.setMapType(G_SATELLITE_MAP);
var point = new GPoint(<?php ".$articulo['Lingitud']."?>,<?php ".$articulo['Latitud']."?>);
var marker = new GMarker(point);
map.addOverlay(marker); } } //]]>
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 200px;"></div>
</body>

</body>

Pero me da el error:
Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING

Campesino · #10 (**permalink**) 23/05/2010, 02:27

Por favor ¿ Alguien puede ayudarme ?

Nisrokh · #11 (**permalink**) 04/06/2010, 11:46

Creo que este es tu error:

Código PHP:

Ver original<?php ".$articulo['Latitud']."?>,<?php ".$articulo['Longitud']."?>
// Eso imprimiria algo asi, por Ej. ".37.123456., .37.123456."
// Aunque no lo va a imprimir porque no le estas ordenando que haga "echo" o "print" con esa informacion...
// Aun asi, fijate en los puntos

Ya que si lo que queres es enviar esos datos al explorador tendrias que hacer asi:

Código PHP:

Ver original<?php print $articulo['Latitud'] ?>
// O asi...
<?php print $articulo['Latitud']. ", " .$articulo['Longitud'] ?>
// O asi...
<?php print "{$articulo['Latitud']}, {$articulo['Longitud']}" ?>

Ya que lo que estabas haciendo, era concatenar las variables de una manera incorrecta, no se puede cerrar con ?> y seguir concatenando despues de abrir <?php, ya que te mostrara error. Y tampoco hace falta abrir comillas, si quieres empezar a concatenar con una variable:

Código PHP:

Ver original$var = "" .$algo. "";
// Eso NO esta mal, pero seria complicarse las cosas... Es igual hacer eso:
$var = $algo;
// O si quieres forzarlo a ser una cadena (string) se puede de muchas maneras...
 
// 1
$var = "{$algo}";
// 2
$var = (string)$algo;
// 3
$var = '';
$var.= $algo;

Te muestro con el codigo completo...

Código HTML:

Ver original<html>
    <head>
        <title></title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
        <script type="text/javascript">
            //<![CDATA[
            function initialize() {
                if (GBrowserIsCompatible()) {
                    var map = new GMap2(document.getElementById('map_canvas'));
                    map.setCenter(new GLatLng(<?php print $articulo['latitud'] ?>, <?php print $articulo['longitud'] ?>), 17);
                    map.addControl(new GLargeMapControl(<?php print $articulo['latitud'] ?>, <?php print $articulo['longitud'] ?>));
                    map.setMapType(G_SATELLITE_MAP);
                    
                    var point = new GPoint(<?php print $articulo['latitud'] ?>, <?php print $articulo['longitud'] ?>);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                }
            }
            //]]>
        </script>
    </head>
    <body onload="initialize()" onunload="GUnload()">
        <div id="map_canvas" style="width: 400px; height: 200px;"></div>
    </body>
</html>

Campesino · #12 (**permalink**) 05/06/2010, 10:23

Gracias por responder, pero sigue sin salir nada, lo que quiero es que el script de Google maps tome los datos de longitud y latitud que hay en la base de datos y muestre el mapa con el punto correspondiente a esas coordenadas.

Este es el codigo completo:

<html>
<head>
<title></title>
<?php
function conectar()
{
$base_de_datos = "Mi base de datos";
$db_usuario = "Mi usuario";
$db_password = "Mi pass ";

if (!($link = mysql_connect("localhost", $db_usuario, $db_password)))
{
echo "Error conectando a la base de datos.";
exit();
}
if (!mysql_select_db($base_de_datos, $link))
{
echo "Error seleccionando la base de datos.";
exit();
}
return $link;
}

$db = conectar();
$resultados = mysql_query("SELECT * FROM tabla WHERE id='38'");
while($articulo=mysql_fetch_array($resultados))
?>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQ IAAAAIxQWpU1-QF8PtuHoL59_tBRlJPYwn47xzjqwfW1L972ysqJV7hTeTtJFq6 w4AZdwjiz5j_tNLbIx-A"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map_canvas'));
map.setCenter(new GLatLng(<?php $articulo['latitud'] ?>,<?php $articulo['longitud'] ?>), 17);
map.addControl(new GLargeMapControl(<?php $articulo['latitud'] ?>,<?php $articulo['longitud'] ?>));
map.setMapType(G_SATELLITE_MAP);
var point = new GPoint(<?php $articulo['latitud'] ?>, <?php $articulo['longitud'] ?>);
var marker = new GMarker(point);
map.addOverlay(marker);
}
} //]]>
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 200px;"></div>
</body>
</html>

Leone_Mathias · #13 (**permalink**) 01/08/2010, 11:00

Hola,
Yo tengo el mismo problema, estoy tratando de buscar la solucion y no la encuentro, pero yo lo programo en .net aspx

alguien nos puede ayudar por favor.

neroxdt · #14 (**permalink**) 12/08/2010, 17:09

hola, segun lo que entiendo es que tienes una base de datos donde estas guardando unas coordenadas ( lat, lng ) y las kieres mostrar en google maps.

ps bueno yo tengo algo parecido no se si te sirva:

(trate de modificarlo a tus necesidades pero ojala te sirva)

//////////////// CONEXION BD ////////////////////////////

if (!($link=mysql_connect("SERVIDOR","USUARIO","CONTR ASEÑA"))) {
echo "
<div class='content' align='center'>
<table border='2' cellpadding='2'>
<tbody>
<tr style='background-color:#033; color:; font-weight:bold'>
<td><h2>Error connecting to Database.</h2></td>
</tr>
</tbody>
</table>
</div>
";
exit();
}
if (!mysql_select_db("BASEDEDATOS",$link)) {
echo "
<div class='content' align='center'>
<table border='2' cellpadding='2'>
<tbody>
<tr style='background-color:#033; color:; font-weight:bold'>
<td><h2>Error selecting to Database.</h2></td>
</tr>
</tbody>
</table>
</div>
";
exit();
}

//////////////// CONSULTA DE LAS COORDENADAS ////////////////////////////
<?php

$sqlcoor = "SELECT lat, lng FROM tabla WHERE id= '38'";

$rescoor = mysql_query($sqlcoor, $link);

while($rowcoor = mysql_fetch_array($rescoor))
{
$latlug = $rowcoor['lat'];
$lnglug = $rowcoor['lng'];
?>

<a href="javascript:coord('<?php echo $rowcoor['lat'];?>','<?php echo $rowcoor['lng'];?>','<?php echo $rowcoor['nombre'];?>')" style="color:#000">
</a>

//////////////// SCRIPT DE LAS COORDENADAS ////////////////////////////
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=tu clavee" type="text/javascript"></script>

<script type="text/javascript">
function coord(v1, v2){

var map;
var lugar;
var lat = v1;
var lon = v2;

if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));

lugar = new GLatLng(lat, lon)
map.setCenter(lugar, 17);
map.setUIToDefault();
map.setMapType(G_NORMAL_MAP);
map.addControl(new GOverviewMapControl());

// esto es para crear un icono pero si kieres no se lo pongas
var avatar = "http://localhost/web/img/foto.jpg";

map.addOverlay(createMarker(lugar, avatar));
}

function createMarker(latlng, img_url) {
// Se define el icono
var icon = new GIcon();
icon.image = img_url
icon.iconSize = new GSize(25, 25);
icon.iconAnchor = new GPoint(50, 50);
icon.infoWindowAnchor = new GPoint(25, 25);

// Se crea el marcador
var marker = new GMarker(latlng, icon);

GEvent.addListener(marker, "click", function() {

var myHtml = "<div>"+
"<fieldset>" +
"<div>" +
"<label>" +
"<img src='" + img_url + "'/>" +
"<br/><hr/>" +
"LAT: " +
lat +
"<br/><br/>" +
"LNG: " +
lon +
"<br/><br/>" +
"</label>" +
"</div>" +
"</fieldset>" +
"</div>";

map.openInfoWindowHtml(latlng, myHtml);
});

return marker;
}
}
</script>

NOTA: no le des copy paste ya que tienes que mirar tus cosas y ver que le puedes cambiar para que te funcione con lo tuyo

OTRA COSA: alguno me puede ayudar en especificar una ruta para colombia, es que hago el metodo con el GDirection pero siempre me dice que sale error porque no reconoce algo,

obiamente si a ese mismo metodo le meto coordenadas de USA o España por ejemplo si la hace. no se como hacer eso. ayudenme por favor.