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.
Crear Marker en Google Maps a pantalla completa con centro automático
- enero 24, 2018
- Categoría: jquery php utilidades web
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>