July 2016


          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
 
FEEDS
 
ARCHIVES
 
RECENT ENTRIES
 
OTHER BLOGGERS
 
AGGREGATORS
 
SOCIAL NETWORKS
:: 11/07/2015 ::
PHP, MariaDB, and Google Geocoding
Return   Back To Top
Mixing a bit of PHP that reads in a city-country list from a MariaDB database and the Google JavaScript Geocoding API, I created a quick way to take a peek at some cities throughout the world.

Here it is in action:

Hello World Maps

Map of Manila.

Show me the code.

|
|
V

Code:

<?php
	require_once ($_SERVER['DOCUMENT_ROOT']."/mobileapp/PDO_hpialcontacts.php") ;
    if (!isset($_GET['city'])) {
    	$city = 'Spring';
    } else {
    	$city = $_GET['city'];
    }
    if (!isset($_GET['country'])) {
    	$country = 'United States of America';
    } else {
    	$country = $_GET['country'];
    }
?>
<!DOCTYPE html>
<html>
  <head>
    <title>HP Cities featuring Google Geocoding Service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map {
			height: 100%;
		}
		#floating-panel {
			position: absolute;
			top: 10px;
			left: 25%;
			z-index: 5;
			background-color: #fff;
			padding: 5px;
			border: 1px solid #999;
			text-align: center;
			font-family: 'Roboto','sans-serif';
			line-height: 30px;
			padding-left: 10px;
		}
    </style>
  </head>
  <body>
    <div id="floating-panel">
		<select name="address" id="address" style="height: 20px; width: auto;">
			<option value="">Select a City ...</option>
			<?php if (isset($city)) { ?>
				<option value="<?php echo $city.', '.$country; ?>" selected><?php echo $city.', '.$country; ?></option>
			<?php } ?>
			<?php
				$query="SELECT city.CityName, country.CountryName
				FROM city
				LEFT OUTER JOIN country ON country.CountryId = city.CountryID
				ORDER BY city.CityName;";
				foreach  ($lddb->query($query) as $row) {
			?>
			<option value="<?php echo $row['CityName'].', '.$row['CountryName']; ?>"><?php echo $row['CityName'].', '.$row['CountryName']; ?></option>
			<?php } ?>
		</select>
    </div>
    <div id="map"></div>
    <script>
		function initMap() {
		  var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 8,
			center: {lat: 30.03758, lng: -95.5573227}
		  });
		  var geocoder = new google.maps.Geocoder();

		  document.getElementById('address').addEventListener('change', function() {
			geocodeAddress(geocoder, map);
		  });
		}

		function geocodeAddress(geocoder, resultsMap) {
		  var address = document.getElementById('address').value;
		  geocoder.geocode({'address': address}, function(results, status) {
			if (status === google.maps.GeocoderStatus.OK) {
			  //alert(results[0].geometry.location);
			  resultsMap.setCenter(results[0].geometry.location);
			  var marker = new google.maps.Marker({
				map: resultsMap,
				position: results[0].geometry.location
			  });
			} else {
			  alert('Geocode was not successful for the following reason: ' + status);
			}
		  });
		}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"
        async defer></script>
  </body>
</html>