Lista HMTL5 + mapa + PHP

[pereirls 0]

Boa noite!!

 

Estou tentando criar uma lista de hemocentros, com um botão no qual quando o usuário clica aparece um mapa mostrando a localização (de acordo com as coordenadas trazidas do banco). a lista está criada e listando todas as informações, porém quando clico no botão para mostrar o mapa, o app mostra sempre a localização do mesmo hemocentro não importa em qual item eu clico. Segue o código:

<?php 

if($_GET['acao'] == 'listahemocentros'){

	 $SQL = "SELECT * FROM hemocentros";
	 
      $re = mysql_query($SQL, $serve);
 
     $num = mysql_num_rows($re);

     if($num > 0){
 
                  
        while($Linha = mysql_fetch_object($re)){
                  					echo $Linha->latlon;			
									echo 
																		"<script>

function showPosition(position)
  {
		
  latlon=new google.maps.LatLng($Linha->latlon)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width.alignmentBaseline;
  
 
  var myOptions={
  center:latlon,zoom:16,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:true,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById('mapholder'),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:'Você está Aqui!'});
  }
  
					
					
					
					
					</script>
									<div class='list-block'>
      <ul>
        <li class='item-content'>
          <div class='item-inner'>
            <div class='item-title'>{$Linha->nome}<p><p>{$Linha->endereco}<p><p>{$Linha->cidade}</div>
          </div>
		<button id='btnmap' onClick='showPosition()'>Ver Mapa</button>	
        </li>
			</div>";  
				  
                  
           }

      }
      else{
          echo 'nenhum Hemocentro cadastrado';
      }
}
?>

Alguma idéia?

[DSerma 19]

Você não está passando o parâmetro correto para a função.

Veja a sua chamada do botão:

<button id='btnmap' onClick='showPosition()'>Ver Mapa</button>

Está vazia, sem parâmetro.

O ideal seria passar a localização desejada como parâmetro da função, assim, cada botão mostraria a devida localização, que será chamada pelo parâmetro da mesma.

[pereirls 0]

Certo nesse caso nessa parte:

<button id='btnmap' onClick='showPosition()'>Ver Mapa</button>

ficaria assim?

<button id='btnmap' onClick='showPosition({$Linha->latlon})'>Ver Mapa</button>

fiz da forma acima e nao funcionou :/

[DSerma 19]

Mas você mudou a sua função para receber este parâmetro e tratá-lo corretamente?
Não basta apenas passar o parâmetro, sua função deve colocá-lo no lugar correto.

[pereirls 0]

Ai pegou, eu nao sei como altera-la :(

[pereirls 0]

Assim funcionaria?

    while($Linha = mysql_fetch_object($re)){
                  					echo $Linha->latlon;			
									echo 
											"<script>

function showPosition(position)
  {
		
  latlon=new google.maps.LatLng(position)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width.alignmentBaseline;
  
 
  var myOptions={
  center:latlon,zoom:16,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:true,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById('mapholder'),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:'Você está Aqui!'});
  }
  
					
					
					
					
					</script>
									<div class='list-block'>
      <ul>
        <li class='item-content'>
          <div class='item-inner itemmapa'>
            <div class='item-title'>{$Linha->nome}<p><p>{$Linha->endereco}<p><p>{$Linha->cidade}<p><p>{$Linha->latlon}</div>
            <button id='btnmap' onClick='showPosition({$Linha->latlon})'>Ver Mapa</button>	
          </div>
		
        </li>
			</div>";  
				  
                  
           }

      }
      else{
          echo 'nenhum Hemocentro cadastrado';
      }

[pereirls 0]

A quem possa interessar, resolvi com este código:

<?php
    ini_set( 'default_charset', 'UTF-8' );
    ini_set( 'max_execution_time', 0 );
 
    $bd_server  = 'xxx.xxx.xx.xx';
    $bd_usuario = 'xxxx';
    $bd_senha   = 'xxx';
    $bd_nome    = 'xxxxx';
   
    $con = mysql_connect( $bd_server, $bd_usuario, $bd_senha ) or die( 'Erro de conexao: ' . mysql_error() );
            mysql_select_db( $bd_nome, $con ) or die ( 'Erro selecao banco de dados: ' . mysql_error() );
            mysql_set_charset( 'utf8', $con );
           
    mysql_query( "SET NAMES 'utf8'", $con );
    mysql_query( 'SET character_set_connection=utf8', $con );
    mysql_query( 'SET character_set_client=utf8', $con );
    mysql_query( 'SET character_set_results=utf8', $con );
?>
<!DOCTYPE html>
<html>
    <head>
        <title>TESTE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_DO_GOOGLE"></script>
        <style tyle="text/css">
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            ul{margin-bottom:40px;}
            ul li{list-style-type:none; display:inline-block; margin:10px 20px;}
            ul li button{cursor:pointer;}
            #map {width:100%; height:400px;}
        </style>
 
        <script>
            function infoPosicao( set_lat, set_lng, id_map ) {
               
                var myLatlng = new google.maps.LatLng(set_lat, set_lng);
                var mapOptions = {
                  zoom: 16,
                  center: myLatlng
                };
                var map = new google.maps.Map(document.getElementById(id_map), mapOptions);
 
                var marker = new google.maps.Marker({
                    // The below line is equivalent to writing:
                    // position: new google.maps.LatLng(-34.397, 150.644)
                    position: {lat: set_lat, lng: set_lng}, map: map });
 
                    // You can use a LatLng literal in place of a google.maps.LatLng object when
                    // creating the Marker object. Once the Marker object is instantiated, its
                    // position will be available as a google.maps.LatLng object. In this case,
                    // we retrieve the marker's position using the
                    // google.maps.LatLng.getPosition() method.
                    var infowindow = new google.maps.InfoWindow({
                        content: '<p>Localização do marcador:' + marker.getPosition() + '</p>'
                    });
 
                    google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
               
            }
        </script>
    </head>
    <body>
        <?php
            $acao = isset($_GET['acao']) ? trim($_GET['acao']) : '';
           
            if( $acao == 'listahemocentros') {
 
                $sql = "SELECT * FROM hemocentros";
 
                $qry = mysql_query( $sql );
 
                $num = mysql_num_rows( $qry );
 
                if( $num > 0 ) {
                   
                    echo '<ul>';
                        while( $linha = mysql_fetch_array($qry, MYSQL_ASSOC) ) {
 
                            list( $lat, $lng ) = explode( ', ', $linha['latlong'] );
 
                            $nome       = $linha['nome'];
                            $endereco   = $linha['endereco'];
                            $cidade     = $linha['cidade'];
 
                            echo '<li class="item-content">
                                           <div class="item-inner">
                                               <div class="item-title">
                                                   <p>'.$nome.'</p>
                                                   <p>'.$endereco.'</p>
                                                   <p>'.$cidade.'</p>
                                               </div>
                                           </div>
                                            <button id="btnmap" onClick="infoPosicao(\''.$lat.'\', \''.$lng.'\', \'map\')">Ver Mapa</button>   
                                       </li>';  
                        }
                    echo '</ul>';
 
                } else
                    echo 'Nenhum Hemocentro cadastrado';
            } else
                echo 'Ação listahemocentros não localizada.';
     
            mysql_close($con);
        ?>
       
        <div id="map"></div>
    </body>
</html>