Añadir marcadores para mostrar localizaciones sobre un mapa de Google

La API de Google Maps nos proporciona datos geográficos basándose en la solicitud enviada a travñes de un script del lado del cliente. En este tutorial veremos cómo agregar marcadores para mostrar un array de ubicaciones en Google Maps.

En este ejemplo, leo las ubicaciones de una base de datos de países que contiene todos sus nombre. Recorreremos todos los países y obtendremos su latitud y longitud mediante el servicio Google Map GeoCoding. Una vez obtenidas las ubicaciones, añadiremos marcadores para señalar dichos países sobre el mapa. Posando el ratón sobre cada marcador, mostraremos un tooltip con el nombre del país puesto que lo tenemos de nuestra base de datos.

Obtener los nombres de los países de nuestra base de datos

Este código nos conectará a nuestra base de datos utilizando la clase DBController, obtendrá el nombre de los países de la tabla tbl_country y los almacenará en un array. Utilizaremos el array de resultados para obtener sus coordenadas y después añadir los marcadores en el mapa.

<?php

require("DBController.php");

$dbController = new DBController();

$query = "SELECT * FROM tbl_country";
$countryResult = $dbController->runQuery($query);

?>

Javascript para añadir los marcadores en el mapa de Google

En este Javascript obtendremos la latitud y longitud de cada uno de los paises almacenados en el array. En cada iteración del bucle utilizaremos el servicio de Google Map Geocoding para obtener las coordenadas de cada uno de los registros. Una vez hecho esto, utilizaremos esta información para señalar la ubicación en un mapa con un marcador. Al posar el ratón sobre cada marcador, se mostrará el nombre del país mediante un tooltip.

<script
		src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap"
		async defer></script>

	<script type="text/javascript">
	var map;
	var geocoder;		

	function initMap() {
		var mapLayer = document.getElementById("map-layer");
		var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
		var defaultOptions = { center: centerCoordinates, zoom: 4 }

		map = new google.maps.Map(mapLayer, defaultOptions);
		geocoder = new google.maps.Geocoder();
		
		<?php
		if (! empty($countryResult)) {
		    foreach ($countryResult as $k => $v) {
		        ?>  
		         	geocoder.geocode( { 'address': '<?php echo $countryResult[$k]["country"]; ?>' }, function(LocationResult, status) {
						if (status == google.maps.GeocoderStatus.OK) {
							var latitude = LocationResult[0].geometry.location.lat();
							var longitude = LocationResult[0].geometry.location.lng();
						} 
		        	    		new google.maps.Marker({
		            	        position: new google.maps.LatLng(latitude, longitude),
		            	        map: map,
		            	        title: '<?php echo $countryResult[$k]["country"]; ?>'
		            	    });
					});
			    <?php
		    }
		}
		?>		
	}
	</script>