Español
EninSoft – recursos para programadores web
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>

automatico centro completa google mapa marker pantalla

Buscar

Publicaciones recientes

  • Script para copiar la base de datos de producción a desarrollo
  • Cómo comprar una Play Station 5 (PS5) en MediaMarkt
  • Crear un USB Parrot OS con persistencia desde Linux.
  • Configurar PHP-FPM con varios usuarios/grupos para servidores multihosting. PHP-FPM 7.3 – Debian 10 Buster.
  • Cambio de Apache Handler (ModPHP) a PHP FPM 7.3 en Debian Buster.

Categorías

  • benchmark
  • bug
  • clúster
  • correo
  • css
  • desarrollo
  • documentación
  • framework
  • hardware
  • HE
  • imagen
  • java
  • jquery
  • linux
  • mac (osx)
  • minar
  • monedas virtuales
  • mysql
  • pci dss
  • php
  • python
  • redes
  • SAP
  • seguridad
  • Sin categorizar
  • sodimm
  • utilidades
  • virtualización
  • WAF
  • web
  • windows
  • wordpress
Copyright © 2018 EninSoft.com. Todos los derechos reservados
  • Aviso legal
  • Política de privacidad
  • Política de cookies
Buscar

Utilizamos cookies para darte la mejor experiencia en nuestra web.

Puedes saber más sobre qué cookies usamos o desactivarlas en los ajustes.

Política de privacidad
EninSoft - recursos para programadores web

Esta web utiliza cookies para proporcionarte la mejor experiencia de navegación posible. Estas cookies son guardadas en tu navegador y cumplen funciones como reconocerte cuando regresas a esta web y ayudarnos a saber qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias son aquellas fundamentales para el correcto uso de la web. No guardamos ninguna información sensible en ellas.

Si deshabilitas esta cookie, no podremos guardar tus preferencias. Esto implicará que cada vez que visites nuestra web tendrás que habilitar o deshabilitar las cookies de nuevo.

Cookies de analítica

Esta web usa Google Analytics para recoger información como el número de visitantes o las páginas más populares.

Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias

By  GDPR Cookie Compliance