Have any of you done in php the following in a to show several maps with google map indicating the location of a place?

Question

Have any of you done in php the following in a to show several maps with google map indicating the location of a place?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

 <script async defer>
    
  function initMap() {
    var esta_latitud=$("#map").attr("latitud");
        var esta_longitud=$("#map").attr("longitud");
   
        var uluru = {lat: parseInt(esta_latitud), lng: parseInt(esta_longitud)};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>

<div class="row">



           <?php
    
    $row = $controller->listar_foto_categoria_equipos_comida();
    foreach ($row as $k) {
    ?>

        <div class="col-md-4">
        <img  style=" max-width: 100%; height: 400px; padding: 10px;" src="<?php echo "../../".$k['foto']; ?>" alt=""  />
        </div>

        <div class="col-md-4">
        <div class="tarjeta">
        <p style="text-align: center; font-size: 20px;">Beneficio <i class="fa fa-handshake-o" aria-hidden="true"></i><br><?php echo $k['nombre']; ?></p><br>
       <p style="text-align: center; font-size: 20px;">Telefono <i class="fa fa-phone" aria-hidden="true"></i><br><?php echo $k['esta_telefono']; ?></p><br>
      <p style="text-align: center; font-size: 20px;">Direccion<i class="fa fa-street-view" aria-hidden="true"></i><br><?php echo $k['esta_direccion']; ?></p><br>
        <p style="text-align: center; font-size: 20px;">Vigencia hasta:<i class="fa fa-hourglass-half" aria-hidden="true"></i><br><?php echo $controller->fechaCastellano($k['caducidad']); ?></p>
        </div>

        </div>
        <div class="col-md-4 ">
        <p style="text-align: center; font-size: 30px; position: absolute;left: 50%; top: -30px;"><label></label><i class="fa fa-map-marker"></i></p>
        <div class="m" id="map" latitud="<?php echo $k['esta_latitud'];?>" longitud="<?php echo $k['esta_longitud'];?>"  ></div>
        </div>

  <?php
   }
   ?>

javascript php

asked by Jesus Alberto Camargo Perez 07.12.2017 в 19:26

source

2 answers

Fill datagridview with condition # Sql date / time field value out of range: "0000-00-00 00:00:00"

score 0 · Answer 1

I would go through all the elements map once loaded and collect the data to start it with google maps ...

$(function() {
   
    $('.map').each(function(i){
       
        var _this    = $(this);
        var latitud  = _this.attr('latitud');
        var longitud = _this.attr('longitud');
        
        console.log( 'Elemento #' + (i+1), latitud );
        console.log( 'Elemento #' + (i+1), longitud );        
        
        /*        
        Y con estos datos puedes iniciar el mapa de google
        
        var uluru = {lat: parseInt(latitud), lng: parseInt(longitud)};
        var map = new google.maps.Map( _this, { zoom: 4, center: uluru });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });        
        */
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ejemplo resultado -->
<div class="map" latitud="lat123" longitud="lng456"></div>
<div class="map" latitud="lat123" longitud="lng456"></div>
<div class="map" latitud="lat123" longitud="lng456"></div>

I would also work with the data-* attributes since they are not valid

Example:

<div class="map" data-latitud="lat123" data-longitud="lng456"></div>

and in your jQuery you pick it up this way:

var latitud  = _this.data('latitud');

score 0 · Answer 2

Your logic is basically correct (not beautiful, but correct). However, each ID in the DOM must be unique, or else it will only take into account the first element with that ID. What you should do is assign different IDs:

<?php
 foreach ($row as $index => $k) {
?>

<div class="m" id="map_<?php echo $index;?>" latitud="<?php echo $k['esta_latitud'];?>" longitud="<?php echo $k['esta_longitud'];?>"  ></div>


<?php
 }
?>

With which you would have different ids (map_0, map_1, map_2).

However, you may not even need to go to the maps. The solution proposed by aldanux can be completed by doing:

$(function() {

    $('.map').each(function(i){

        var _this    = $(this);
        var latitud  = _this.attr('latitud');
        var longitud = _this.attr('longitud');

        var uluru = {lat: parseInt(latitud), lng: parseInt(longitud)};
        var map = new google.maps.Map( _this[0], { zoom: 4, center: uluru });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });        

    });
});

Beware, that the google map builder would use _this[0] which is an HTMLElement. _this would be a jQuery selector.