EninSoft - recursos para programadores web > Eninsoft > jquery > Crear Marker en Google Maps a pantalla completa con centro automático

Crear Marker en Google Maps a pantalla completa con centro automático

enero 24, 2018
Categoría: jquery php utilidades web

No hay comentarios

Importante: Esta información es para uso lúdico personal. En ningún caso se pretende dar conocimientos, consejos, formaciones, herramientas, ni soluciones técnicas de ámbito comercial ni profesional. Simplemente es información que se ha redactado en finalidad de recordatorio de ciertos proyectos realizados. Si usted no está seguro de la fiabilidad de la información, no cumple con sus expectativas o no es de su agrado, le ruego que abandone este sitio web. Para ver todas las exclusiones garantía y de responsabilidad acceda a la sección Aviso Legal.

Script PHP que carga un mapa de Google Maps. Este mapa contiene un marker ubicado en la Latitud y Longitud que se le indica por parámetro GET. El mapa se formatea con CSS para que se adapte a pantalla completa. También rebuica automaticamente la interfaz para que el marker esté siempre en el centro.

Se debe sustituir XXX por el MAPS GOOGLE KEY.

<?php
$module = 'api-map';

$latitude = null;
$longitude = null;

if (isset($_GET['latitude']) && isset($_GET['longitude'])){
  $latitude = $_GET['latitude'];
  $longitude = $_GET['longitude'];
}

?>
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="API Map - Eninsoft.com">
    <meta name="author" content="Eninsoft.com">
    <meta name="robots" content="index,follow">
    <title>API MAP - Eninsoft.com</title>
    
    <style>
  html, body, #map_four {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
  }
  #map_four{
      position: relative;
  }
  </style>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=XXX" type="text/javascript"></script>
  </head>
  <body>
      
    <?php if (is_numeric($latitude) && is_numeric($longitude)){ ?>
  
    <div id="map_four"></div>
  
  <script>
    
      //Terrain Map
      var map;
      var bounds;
      var loc;
      var marker1;
      var contentString1;
      var infoWindow1;
      
      bounds  = new google.maps.LatLngBounds();
      
      map = new google.maps.Map(document.getElementById('map_four'), {
        zoom: 14,
        center: new google.maps.LatLng(42.1071, 2.208),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
                        
        var marker1 = new google.maps.Marker({
            map: map,
            draggable: false,
            animation: google.maps.Animation.DROP,
            position: {lat: <?=$latitude?>, lng: <?=$longitude?>}
        });
        
        var contentString1 = '<p>Latitud: <?=$latitude?><br>Longitud: <?=$longitude?></p>';
    
        var infoWindow1 = new google.maps.InfoWindow({
            content: contentString1
        });

        marker1.addListener('click', function() {
            infoWindow1.open(map, marker1);
        });
        
        loc = new google.maps.LatLng(marker1.position.lat(), marker1.position.lng());
        bounds.extend(loc);

        map.fitBounds(bounds); 
        map.panToBounds(bounds);
        
    </script>
    <?php }else{ ?>
      <p>Warning: 'latitude' and 'longitude' parameters are required.</p>
    <?php } ?>
      
  </body>
  
</html>