obtener coordenadas de mysql con javascript

dairo65 · #1 (**permalink**) 26/02/2017, 18:52

hola

tengo mi bd con los campos
id, titulo, coord1, coord2

y mi mapa de google maps donde guardo estos campos , pero ahora lo que quiero es extraer de mi bd estas coordenadas filtradas por titulo y que se muestren en el google maps con un mensaje del titulo osea algo asi

id titulo coord1 coord2
4 carnicería del norte 5.546466873192644 -73.35496723651886

y que en el mapa muestre el marcador con la dirección y el nombre del negocio que en este caso es carnicería del norte

no se si me haga entender pero si necesitan saber algo mas me avisan
desde ya muchas gracias por su amable colaboracion.

petit89 · #2 (**permalink**) 26/02/2017, 20:38

Necesitas trabajar con la API de Google Maps, solo de esta manera podras agregar los lugares en el mapa que tienes insertado, lo de obtener los datos almacenados bien, pero necesitas los metodos que la API te dará

dairo65 · #3 (**permalink**) 26/02/2017, 21:01

gracias por responder petit89

tengo este codigo no he mostrado el mapa por que lo estoy probando con la conexion pero me dice que no se ha definido la variable query no se que tenga mal

Código PHP:

Ver original<?php
 
include "../conex.php";
if(!empty($_POST)){
 
    $pattern = $_POST['pattern'];
 
 
  $sql1 = "SELECT * FROM coordenadas WHERE titulo LIKE '".$pattern."%' or titulo LIKE '".$pattern."%';";
 
$result = mysqli_query($conexion, $sql1) or die ("Error: ".mysqli_error($conexion));
$row_cnt = mysqli_num_rows($result);
 
 
$query = $conexion->query($sql1);
}
?>
 
<?php if($query->num_rows>0):?>
<table class="table table-bordered table-hover">
<thead>
  <th>titulo</th>
  <th>cx</th>
  <th>cy</th>
  
 
 
  
</thead>
<?php while ($r=$query->fetch_array()):?>
<tr>
 
  <td><?php echo $r["titulo"]; ?></td>
  <td><?php echo $r["cx"]; ?></td>
  <td><?php echo $r["cy"]; ?></td>
  
     
    
 
  </td>
</tr>
<?php endwhile;?>
 
<?php else:?>
 
<?php endif;?>
 
<!--<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mapa</title>
<script src="http://maps.google.com/maps?file=api&v=3&key=ABQIAAAAp9wVclPicp2HGB4QNX-LLRTqx4D3bS478d-1w1nVZmw5mBzr_hTd8Hb4lXsLPv7hW7mRH6_tkUmJ3g" type="text/javascript"></script>
<script type="text/javascript">
-->
 
 
<body onLoad="load();"  onunload="GUnload();"> 
<center>
<div align="center" id="map" style="height: 425px; width: 425px;">
 
<script src="/myopen/ojo/js/main.js"></script>
 
<form>
 
<input type="search" placeholder="Buscar" id="buscar" name="s">
<button type="submit" class="btn btn-default" ><i class="material-icons">search</i></button>
<div id="datos"></div>
</form>
</div>
</center> 
</body>
</html>

este el js

Código Javascript:

Ver originalfunction buscar(){
 
    var pattern = document.getElementById('buscar').value;
    var solicitud = new XMLHttpRequest();
    var data  = new FormData();
    var url = '../php/busqueda.php';
 
 
 
    data.append("pattern", pattern);
    solicitud.open('POST',url, true);
    solicitud.send(data);
 
    solicitud.addEventListener('load', function(e){
        var cajadatos = document.getElementById('datos');
        cajadatos.innerHTML = e.target.responseText;
         
}, false);
}
 
window.addEventListener('load', function(){
 
    document.getElementById('buscar').addEventListener('input', buscar, false);
 
}, false);

desde ya gracias