Using PHP/MySQL with Google Maps

usman07 · May 14, 2012

Need help with this, has anyone does this before?

Here is the tutorial I have been following: https://developers.google.com/maps/articles/phpsqlajax#outputxml

The part I am on from the tutorial is where it says Checking that XML output works it is meant to display the data from the database but i just get a blank page, no data is shown from my database on the page? I just have a php file with the code from the tutorial.

mrMarcus · May 14, 2012

You definitely need to install Firebug for Firefox for starters.

Can you post your example here? There is no information I can go off of based on your initial write-up.

I would suggest using JSON to populate the map. Much more efficient than XML and works great with jQuery's AJAX class. Can accomplish the same thing as that Google example, but in half the time/lines of code, and a fraction of the confusion.

main map page (index.php?)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<title>Example Map - mrMarcus</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	var map;
	var mapCenter = new google.maps.LatLng(48.31048, -95.361328); // change initial centering if necessary
	var gmarkers = [];
	function initialize() {
		var myOptions = {
			zoom: 13,
			center: mapCenter,
			mapTypeId: google.maps.MapTypeId.TERRAIN
		};
		map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
		current_zoom = map.getZoom();
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	var infowindow = new google.maps.InfoWindow();
	var bounds = new google.maps.LatLngBounds();
	var marker, i;
	var myLatLng;

	function CreateMarker (obj, i) {
		myLatLng = new google.maps.LatLng(obj['lat'], obj['lng']);
		marker = new google.maps.Marker({
			position: myLatLng,
			map: map
		});
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent('Name: ' + obj['name'] + '; Address: ' + obj['address']); // obj[] will contain elements from your postback array, ie. obj['name'] && obj['address'] && obj['lat'], etc.
				infowindow.open(map, marker);
			}
		})(marker, i));
		bounds.extend(myLatLng);
		gmarkers.push(marker);
	}
	</script>
</head>
<body>
	<div id="map_canvas"></div>
	<script type="text/javascript">
	$.ajax({
		beforeSend: function() {
			// can have something happen before request is made (ie. "Loading..." message)
		},
		cache: false,
		// data: params, // if you are sending parameters to the 'url' below, ie. if search capabilities are included on the map; 'params' would be GET style URL
		dataType: 'json',
		timeout: 0,
		type: 'POST',
		url: '/get_markers.php?_=<?php echo md5(session_id() . time() . mt_rand(1,9999)); ?>', // create additional file and call it get_markers.php; see code for this file below
		success: function(data) {
			if (data) {
				if (data['count'] > 0) {
					var obj;
					var results = data['results'];

					for (r in data['results']) {
						if (r < (data['count'])) {
							CreateMarker(results[r]);
						}
					}
					map.fitBounds(bounds);
				}
				else {
					alert('No results from the database.');
				}
			}
			else {
				alert('No data received.');
			}
		},
		complete: function(data) {
			// when AJAX call has completed, additional stuff can happen here, but is not necessary
		}
	});
	</script>
</body>
</html>

get_markers.php

<?php
$sql = "SELECT * FROM `markers`";
if ($result = @mysql_query($sql)) {
$count = @mysql_num_rows($result);
if ($count > 0) {
	while ($res = @mysql_fetch_assoc($result)) {
		$lat = (int)$res['lat'];
		$lng = (int)$res['lng'];
		if (!empty($lat) && !empty($lng)) { // if either lat or lng are enpty, they are useless on the map
			$listings_results[] = array(
				'name' => $res['name'],
				'address' => $res['address'],
				'lat' => $res['lat'],
				'lng' => $res['lng'],
				'type' => $res['type']
			);
		}
	}

	// create the variables array;
	$results['count'] = $count;
	$results['results'] = $listings_results;

	// send the encoded results;
	$json = @json_encode($results);
	echo $json;
	exit(0);
}
}
?>

usman07 · May 14, 2012

Thanks mate, i got it sorted eventually.

Sign In

Using PHP/MySQL with Google Maps

Recommended Posts

usman07

Link to comment

Share on other sites

mrMarcus

Link to comment

Share on other sites

usman07

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information