Combine User Location with PHP/MySQL Listings

Steve McIntyre

unread,

Oct 20, 2011, 3:51:24 PM10/20/11

to Google Maps JavaScript API v3

Hi All,

I have done a few of these tutorials successfully, but I have yet to
come across a tutorial that combines these two features and I can't
seem to get there on my own. The method of populating a map with a
database full of markers that works best for me is covered in this
tutorial: //http://code.google.com/apis/maps/articles/
phpsqlajax_v3.html

This is a two file method that uses XML (spit out with PHP) that is
read with JavaScript (thus making it AJAX) on the main page being
viewed.

XML Output: http://hungryvt.com/map_tests/google-php/phpsqlajax_genxml5.php
Main Page: http://hungryvt.com/map_tests/google-php/phpsqlajax_map_v3c.php

First of all, I'm not sure where to put the JS that locates the user.
I'm guessing that it should go on the main page instead of being
placed within the XML output of the business listings, since that's
server side info, and user location is client side. Correct me if I'm
wrong on that one. I put the little blue marker in there with static
info on the XML output page, thinking I could replace that with the
correct code once I figure that part out.

Second, assuming it does go on the main page, I'm not sure if the JS
code has to be placed within the "load" function that is loaded with
the body tag. My attempts at that have not worked. Placing the
geoloation code outside of the "load" function seem to have no effect
or break the map. Here is the code for the main page:

<?php
// IF NO CITY IS CHOSEN, CHOOSE BURLINGTON
if(isset($_GET['city'])){
$city_choice = $_GET['city'];
} else {
$city_choice = "1";
}
require("db_connection.php");
$db_selected = mysql_select_db($database, $conn);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
$query_loc = "SELECT * FROM locations WHERE loc_id = '$city_choice'";
$result_loc = mysql_query($query_loc);
if (!$result_loc) {
die('Invalid query: ' . mysql_error());
}
$row_result_loc = mysql_fetch_assoc($result_loc);
?>
<!DOCTYPE html >

<head>
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
<title>PHP/MySQL & Google Maps Example</title>
<script src="../../scripts/geo.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[

var customIcons = {
blue: {
icon: 'http://labs.google.com/ridefinder/images/
mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/
mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
}
};

function load() {

//geo_position_js.getCurrentPosition(show_position,function()
{document.getElementById('map').innerHTML="Couldn't get location"},
{enableHighAccuracy:true});
//var user =
navigator.geolocation.getCurrentPosition(function(position)
{(position.coords.latitude, position.coords.longitude)});
//var pos = new
google.maps.LatLng(p.coords.latitude,p.coords.longitude);
//THE THREE LINES ABOVE ARE PREVIOUS FAILED ATTEMPTS
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo
$row_result_loc['loc_lat'];?>, <?php echo $row_result_loc['loc_lng'];?
>),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml5.php", function(data) {
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var citystate = markers[i].getAttribute("citystate");
var phone = markers[i].getAttribute("phone");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>"
+citystate + "<br/>" + phone;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>

</head>

<body onload="load()">
<div id="map" style="width: 600px; height: 600px"></div>
</body>

</html>

Rossko

unread,

Oct 20, 2011, 6:14:22 PM10/20/11

to Google Maps JavaScript API v3

> var map = new google.maps.Map(document.getElementById("map"), {
> center: new google.maps.LatLng(<?php echo
> $row_result_loc['loc_lat'];?>, <?php echo $row_result_loc['loc_lng'];?>),

Whatever geolocation code you put in before that, your php writes in
the centre values here effectively hardcoded. Have you used your
browser's 'view source' feature to see what actually gets sent to the
browser by your php?
If you want some javascript to determine the values, and the map to
use those values for a centre, you'll be wanting to use javasacript
variables in there, not values written by php.

An alternate approach would be to start from this geolocation example
http://code.google.com/apis/maps/documentation/javascript/basics.html#Geolocation
and then add-on XML fetching and display

Steve McIntyre

unread,

Oct 20, 2011, 8:23:23 PM10/20/11

to Google Maps JavaScript API v3

> Whatever geolocation code you put in before that, your php writes in
> the centre values here effectively hardcoded. Have you used your
> browser's 'view source' feature to see what actually gets sent to the
> browser by your php?

I forgot to mention those. I put those in there in a side experiment
on map centering. A sort of fall back way of doing it if the user
location couldn't be figured out, or of the user wanted to search a
different city than their current location. If I could get the user
location from JS over PHP, I could easily substitute the PHP calls
there.

> If you want some javascript to determine the values, and the map to
> use those values for a centre, you'll be wanting to use javasacript
> variables in there, not values written by php.

Agreed, and it seems like it's a waste of time to try to mix PHP into
that function. I don't know JS that well, only well enough to grab the
coords and do a write.document (which does me no good). I suppose I
could try to make a seperate function for the coord and plug them in
with a JS function, but I would still need to get the marker in there
somehow.

>
> An alternate approach would be to start from this geolocation examplehttp://code.google.com/apis/maps/documentation/javascript/basics.html...

> and then add-on XML fetching and display

I've tried this one, but I tried it the other way around. In general,
I've adding the JS to my PHP. Are you saying I'd have better luck
adding PHP to my JS? I figured the PHP would need to be executed first
since it's coming from the server, but I'm only guessing on that.

Either way, it seems to me the user marker needs to be inserted into
the map within the same function that populates the map with the PHP/
MySQL listings. Is that much correct? This is the chunk I'm referring
to:

My guess is that I put the user marker in before or after the "for
loop"

FOR LOOP = " for (var i = 0; i < markers.length; i++) { "

Rossko

unread,

Oct 21, 2011, 4:32:42 AM10/21/11

to Google Maps JavaScript API v3

> Agreed, and it seems like it's a waste of time to try to mix PHP into
> that function.

It may be that you haven't grasped how php works? ALL the php is run
at server, any output is assembled into a page which is sent to the
client, THEN the client builds the display and runs any javascript.

> Either way, it seems to me the user marker needs to be inserted into
> the map within the same function that populates the map with the PHP

I don't see why. Look at what you want;
Determine a location
Build and centre a map
Place a marker at location
Fetch some XML from a php script
Draw more markers using the XML

Steve McIntyre

unread,

Oct 21, 2011, 1:30:56 PM10/21/11

to Google Maps JavaScript API v3

> It may be that you haven't grasped how php works? ALL the php is run
> at server, any output is assembled into a page which is sent to the
> client, THEN the client builds the display and runs any javascript.

Yes I do understand that PHP is server side and JS is client side and
that AJAX can make requests from the server (like PHP requests) and
serve them up without refreshing the page.

earlier quote - "I'm guessing that it should go on the main page

instead of being
placed within the XML output of the business listings, since that's
server side info, and user location is client side."

> > Either way, it seems to me the user marker needs to be inserted into
> > the map within the same function that populates the map with the PHP
>
> I don't see why. Look at what you want;
> Determine a location
> Build and centre a map
> Place a marker at location
> Fetch some XML from a php script
> Draw more markers using the XML

So do you have any suggestions on how to do this?

Are you suggesting that each of these steps are separate functions?

I've already stated what I want, and centering the map can be taken
out of the list, since I'm not looking for that bit of info (it's easy
to do once I get the user location). I'm just trying to figure out how
to combine user location with PHP/MySQL listings. Specifically, I'm
trying to find out how the map is drawn in that scenario.

Is the placement of the markers (user & listings) done in one
function?
Is the geolocation a separate function?

From what I can tell, the map drawing is done all at once, but again,
correct me if I'm wrong on that.

Rossko

unread,

Oct 21, 2011, 3:21:38 PM10/21/11

to Google Maps JavaScript API v3

> earlier quote - "I'm guessing that it should go on the main page
> instead of being
> placed within the XML output of the business listings, since that's
> server side info, and user location is client side."

Yes, that would make sense, as javascript placed in a file being
treated as XML data is not going to be executed by the browser at all.

> From what I can tell, the map drawing is done all at once

Not really. Your map is created and centered. Later on, some XML
data is fetched, and some markers are plotted on the existing map from
that, one at a time, in a loop.

If there happened to be pre-existing markers or lines or whatever
already on the map, so what. So we could do the user location stuff
before even fetching XML (many people would choose to do it that way
to exploit the added benefit of actually using the user location to
influence the XML fetching stuff e.g. get nearest data only)

Everyone has their own approach, but solving it in steps seems
straightforward in this case.
Finding the user's location is a task.
Once you have that location, plotting it on the map is a task.
Obviously, there is a prerequisite in there somewhere of setting a map
up before you can plot anything on it.
The geolocation example I pointed you at does all that except plot a
marker, but that is a straightforward addition:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers

After a map exists, you can also fetch XML and plot it as another task
in sequence.

Steve McIntyre

unread,

Oct 21, 2011, 11:32:27 PM10/21/11

to Google Maps JavaScript API v3

So I took your advice and I put the geolocation and the DB listings in
separate functions (tasks).

I was able to get it so the functions load (as seen with the alert on
Listings), but it's still not populating the map_canvas.

I suspect this line might be a key to overcoming this:
bindInfoWindow(marker, map, infoWindow, html);

Here's the page:
http://hungryvt.com/map_tests/google-php/map-geolocation_b.php

Here's the code:

<?php
// IF NO CITY IS CHOSEN, CHOOSE BURLINGTON
if(isset($_GET['city'])){
$city_choice = $_GET['city'];
} else {
$city_choice = "1";
}

require("db_conn.php");

$db_selected = mysql_select_db($database, $conn);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}

$query_loc = "SELECT * FROM locations WHERE loc_id = '$city_choice'";
$result_loc = mysql_query($query_loc);
if (!$result_loc) {
die('Invalid query: ' . mysql_error());
}
$row_result_loc = mysql_fetch_assoc($result_loc);
?>

<!DOCTYPE html>

<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</
title>

$row_result_loc['loc_lat'];?>, <?php echo $row_result_loc['loc_lng'];?
>),

//zoom: 12,
//mapTypeId: 'roadmap'

});
var infoWindow = new google.maps.InfoWindow;

alert("Listings Loaded");

// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml5.php", function(data) {
var xml = data.responseXML;

var markers =
xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var citystate = markers[i].getAttribute("citystate");
var phone = markers[i].getAttribute("phone");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>"
+citystate + "<br/>" + phone;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,

position: pos,

icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}

});
}

function test() {
alert("Test Loaded");
}
</script>

<script type="text/javascript">window.onload = listings;</script>
</head>
<body>
<?php echo $row_result_loc['loc_id']."something";?>
<div id="map_canvas"></div>

</body>
</html>

Message has been deleted

xelawho

unread,

Oct 22, 2011, 6:44:17 PM10/22/11

to Google Maps JavaScript API v3

> I was able to get it so the functions load (as seen with the alert on
> Listings), but it's still not populating the map_canvas.

> I suspect this line might be a key to overcoming this:
> bindInfoWindow(marker, map, infoWindow, html);

I don't think your alert actually shows anything, as it just pops as
the code runs.

better would be to look at firebug:
downloadUrl is not defined

you are calling a function which does not exist.

javascript no like that. javascript get angry. javascript no show
markers.

Steve McIntyre

unread,

Oct 25, 2011, 11:59:14 AM10/25/11

to Google Maps JavaScript API v3

Javascript Smash! Javascript, meet Hulk. Hulk, meet Javascript.

OK, so here's one I ran through Firebug that isn't showing me any
errors. It attempts to combine the geolocation with the DB listings,
though still keeping the code separate for the two functions. It looks
like there are two maps being drawn and the DB map is blocking out the
geolocation map. You can see when you zoom in or out, as the map
redraws, the info window on the map below. You may have to zoom way
out to see in the info window, but I doubt it since the geolocation
script centers the map by the users coordinates.

http://hungryvt.com/map_tests/google-php/combo_c.php

Here's the code for that page, followed by the code of th JS file
linked in the header.

<?php
// IF NO CITY IS CHOSEN, CHOOSE BURLINGTON
if(isset($_GET['city'])){
$city_choice = $_GET['city'];
} else {
$city_choice = "1";
}

require("db_conn.php");

$db_selected = mysql_select_db($database, $conn);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}

$query_loc = "SELECT * FROM locations WHERE loc_id = '$city_choice'";
$result_loc = mysql_query($query_loc);
if (!$result_loc) {
die('Invalid query: ' . mysql_error());
}
$row_result_loc = mysql_fetch_assoc($result_loc);
?>

<!DOCTYPE html >

<head>

scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/
>
<title>PHP/MySQL & Google Maps Example</title>

restaurant: {

icon: 'http://labs.google.com/ridefinder/images/
mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/
mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
}
};

function load() {

var map = new google.maps.Map(document.getElementById("map"), {

center: new google.maps.LatLng(<?php echo
$row_result_loc['loc_lat'];?>, <?php echo $row_result_loc['loc_lng'];?
>),

zoom: 12,

mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file

downloadUrl("phpsqlajax_genxml4.php", function(data) {

var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var citystate = markers[i].getAttribute("citystate");
var phone = markers[i].getAttribute("phone");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>"
+citystate + "<br/>" + phone;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,

position: point,

icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

<<--------- CODE FOR geolocating.js ------------------------>>

var map;

function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'),

The maps are drawn in very different ways, and I've had no luck in
combing the markers from the DB and the info window from the
geolocating JS into one function. I'm almost positive at this point
that the "map = new google.maps.Map(document.getElementById('map')"
can only be used once, and that it should be the one that uses
geolocation. I'm hoping that I can have the DB listings populate the
map with a separate function since keeping it modular will help me
develop other kind of maps.

Rossko

unread,

Oct 25, 2011, 1:02:20 PM10/25/11

to Google Maps JavaScript API v3

> It looks
> like there are two maps being drawn and the DB map is blocking out the
> geolocation map.

Yep, that's exactly it, it does what you tell it to do.

> function load() {
> var map = new google.maps.Map(document.getElementById("map"), {

Makes a map in the <div> with id map.

> function initialize() {
...

> map = new google.maps.Map(document.getElementById('map'),

Also makes a map in the <div> with id map. Whatever was there before
gets destroyed.

Choose one example and get it working. Understand how it works, so
you can extend it.
Now look at the other example and understand it, so that you can
select the necessary parts of it to extend your existing map.
You won't be able to just copy/paste two unrelated chunks of code to
make a functioning whole.

Steve McIntyre

unread,

Oct 25, 2011, 9:57:35 PM10/25/11

to Google Maps JavaScript API v3

Is it possible to leave the map making and geolocation to one
function, and just add markers to the one map with a separate
function?

or

Does the map drawing and marker placement all have to be done in one
function?

jufemaiz:joel

unread,

Oct 25, 2011, 11:30:30 PM10/25/11

to google-map...@googlegroups.com

Yes - you just need to be referencing the same "map" (I'm assuming "map making" is the akin to creating the map itself, whereas adding/removing points is a secondary action).

Steve McIntyre

unread,

Oct 25, 2011, 11:35:31 PM10/25/11

to Google Maps JavaScript API v3

So... Yes, it can be done in two separate functions?

Both could be executed with the window.onload command, rather than the
body tag.

Rossko

unread,

Oct 26, 2011, 4:16:27 AM10/26/11

to Google Maps JavaScript API v3

> Both could be executed with the window.onload command, rather than the
> body tag.

Why 'both'? You don't need everything to happen at once. There is
absolutely nothing stopping you having code that geolocates, plots a
map, requests some XML, plots some XML, etc in sequence.

Steve McIntyre

unread,

Oct 26, 2011, 11:36:57 AM10/26/11

to Google Maps JavaScript API v3

Again, I'll ask....can it be done in two separate functions?

Rossko

unread,

Oct 26, 2011, 11:48:13 AM10/26/11

to Google Maps JavaScript API v3

Yes.

geoco...@gmail.com

unread,

Oct 26, 2011, 11:49:33 AM10/26/11

to Google Maps JavaScript API v3

On Oct 26, 8:36 am, Steve McIntyre <mcintyre...@gmail.com> wrote:
> Again, I'll ask....can it be done in two separate functions?

Yes. You can do it in as many functions as you want. Both functions
will need to have access to the "map".

-- Larry

Steve McIntyre

unread,

Oct 26, 2011, 5:00:34 PM10/26/11

to Google Maps JavaScript API v3

Success! Thank you all for your help and forcing me to find the
solution on my own, especially xelawho.

I've put the whole thing into an external JS file. There's still more
work to be done, but this was the big stumbling block I'd been banging
my head against for the last couple of weeks.

Here it is.

http://hungryvt.com/map_tests/google-php/big_combo.php

// Some Custom Icons borrowed from the 'other function' that may come
in handy

var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/
mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/
mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
}
};

// End Custom Icons

var map;

function initialize() {
var myOptions = {

zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'),

myOptions);

// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position)
{
var pos = new google.maps.LatLng(position.coords.latitude,

position.coords.longitude);

var marker = new google.maps.Marker({
map: map,

position: pos,
icon:'images/markers/you.png',
animation: google.maps.Animation.DROP,
title: 'Location found using HTML5.'
});

var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file

downloadUrl("phpsqlajax_genxml_one.php", function(data) {

map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support
geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}

// Additional functions related to the 'other' DB Listing function

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

On Oct 26, 11:49 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

xelawho

unread,

Oct 26, 2011, 7:18:19 PM10/26/11

to Google Maps JavaScript API v3

> Here it is.
>
> http://hungryvt.com/map_tests/google-php/big_combo.php

firebug no show error. javascript happy!

Reply all

Reply to author

Forward