Json exaple for "Store Locator with PHP, MySQL"

[BPG]

Hi There,

Currently I’m using a customized version of the store locator example
create by Pamela Fox. This store locator still uses V2 and I want to
‘upgrade’ to V3, next to that I want to switch from XML to json be
course that’s what I use to load data for the other parts of my site.

I did find the V3 store locator, tnx Pamela :), is it may be possible
to get me on the way with a json version? I count find any v3 examples
on the internet using php, mysql and json.

Is it possible to provide me with an example for
- the needed json output (similar to Checking That the XML Output
Works),

and more important the
- required JavaScript to process the data and display the makers when
using json input? (similar to Loading the XML Results, only for
json.. ;)

(With similar to, i mean the chapters in
http://code.google.com/intl/nl-NL/apis/maps/articles/phpsqlsearch_v3.html)

Thanks in advance,
Bob

[BPG]

I copied the data from Pamela’s v3 tutorial and got a working XML
version on my local machine.

Now I changed phpsqlsearch_genxml.php to output json, the output looks
like this:

[
{
"address": "1445 Foxworthy Ave, San Jose, CA",
"name": "Giorgio's",
"lat": "37.274647",
"lng": "-121.892891",
"distance": "19.87341148022"
},
{
"address": "4302 Moorpark Ave, San Jose, CA",
"name": "Round Table Pizza",
"lat": "37.315903",
"lng": "-121.977928",
"distance": "21.8619290343098"
}
]

Is there someone who an help me change the javascript to read the json
instead of the xml, or maybe knows a tutorial (maps v3) where it's
explained?

Thanks again
Bob

[BPG]

I started with the basics (basic map) to try to load markers based on
json and v3 tutorials.

I load all the sample data from data.json from within JavaScript tags,
I managed to display the map only the makers aren’t showing up, and I
think I’m missing something, any suggestions?
http://www.koopavond.nu/map/map3.php

Still no one who can point me a good basic tutorial how load json data
in v3, like there are for xml?

Tnx

[Ralph Ames]

>http://www.koopavond.nu/map/map3.php

>Still no one who can point me a good basic tutorial how load json data
>in v3, like there are for xml?

Mikes' v2 tutorial should give you a good start with the concept

http://econym.org.uk/gmap/basic12.htm

Ralph
-
www.easypagez.com/maps/map_index.html
www.easypagez.com/maps/v3_basicmap.html

--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-a...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Rossko]

> think I’m missing something, any suggestions?http://www.koopavond.nu/map/map3.php

Seems to be a bit missing.
There's a loop that reads values from 'data' a thousand times - it'd
probably be smarter to read as many items from 'data' as actually
exist.
The loop creates markers and saves them in an array. It never puts
them on a map.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers
It would also be good idea to create the map before you do try to
place markers on it.

[tinem]

Do you have a working example online for xml from Pamela's tutorial
for v3 to look at, please?

[BPG]

@tinem
Example XML based version: http://www.koopavond.nu/map/map1.php
The XML data: http://www.koopavond.nu/map/phpsqlsearch_genxml.php?lat=40.7143528&lng=-74.0059731&radius=25
The JSON I would output like to use:
http://www.koopavond.nu/map/phpsqlsearch_genjson.php?lat=40.7143528&lng=-74.0059731&radius=25

@Ralp
I did read the V2 tutorial, only that just makes everything harder to
understand for me, since v3 the code has changed so I would first have
to spend days to try and get v2 working, and then spend another two
weeks or so trying to migrate v2 t v3, if I get it to work at all (I
not a JavaScript programmer, just basic php).

Also i did find a JSON example (http://www.jamesfairhurst.co.uk/
themeforest_store_locator_v2/) , unfortunately it uses jQuery witch I
do not prefer be course it only makes it harder to add or change
options since the code doesn’t match the code of the tutorials where
they don’t use jQuery.

@Rossko
Tnx for the input, I think my first piece of code is a mess so I’ll
better stick to the xml example and to to get it to work with JSON
(hopefully with some help ;)

If I’ll get the JSON version up and running I will post the full code
so others are also able to use JSON instead of xml.

Thanks again,
Bob

[Ralph Ames]

>@Ralph

>I did read the V2 tutorial, only that just makes everything harder to
>understand for me, since v3 the code has changed so I would first have
>to spend days to try and get v2 working, and then spend another two
>weeks or so trying to migrate v2 t v3, if I get it to work at all (I
>not a JavaScript programmer, just basic php).

http://www.easypagez.com/maps/v3basicjason.txt

I made a few quick changes to your map:-

http://www.easypagez.com/maps/v3basicjason.html

which now reads in the above jason text file.

[BPG]

@Ralph
You’re the best, now I can start playing around with the code until
the map includes all the options I want it to, this is great,
thanks :))

[BPG]

To complete this topic; this is the code for a basic json store
locator (tnx to Ralp), form here on you can build your map the way you
like, the code isn't perfect jet.

It loads markers based on a given location (form input) and based on
the maps boundaries (when you drag the map).

Mysql part: i use a mysql class so is it's of no use to post the whole
code, so i will post just the queries (to get an idea what you should
do)
Query for the form input
"SELECT address, name, lat, lng, ( 3959 *
acos( cos( radians('".addslashes($center_lat)."') ) *
cos( radians( lat ) ) * cos( radians( lng ) -
radians('".addslashes($center_lng)."') ) +
sin( radians('".addslashes($center_lat)."') ) *
sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance <
'".addslashes($radius)."' ORDER BY distance

Query for the 'drag map' input (BoundBasedMarkers)
SELECT address, name, lat, lng FROM markers WHERE (lat >= ".
$_GET['SW_LAT']." AND lat <= ".$_GET['NE_LAT']." AND lng >= ".
$_GET['SW_LNG']." AND lng <= ".$_GET['NE_LNG'].")

Json output should look like this:
{
"markers": [
{
"address": "54 Stone St, New York, NY",
"name": "Adrianne's Pizza Bar",
"lat": "40.704479",
"lng": "-74.010139",
"distance": "0.71629228421071"
},
{
"address": "32 Spring St, New York, NY",
"name": "Lombardi's",
"lat": "40.721676",
"lng": "-73.995598",
"distance": "0.742486876347813"
}
]}


<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;

function load()
{
map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU},
scrollwheel: false
});

infoWindow = new google.maps.InfoWindow();

locationSelect = document.getElementById("locationSelect");

locationSelect.onchange = function()
{
var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;

if (markerNum != "none")
{
google.maps.event.trigger(markers[markerNum], 'click');
}
};

google.maps.event.addListener(map, 'dragend', function()
{
BoundBasedMarkers(map)
});
}

function searchLocations()
{
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
searchLocationsNear(results[0].geometry.location);
}
else
{
alert(address + ' not found');
}
});
}

function clearLocations()
{
infoWindow.close();

for (var i = 0; i < markers.length; i++)
{
markers[i].setMap(null);
}
markers.length = 0;

locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}

function BoundBasedMarkers(map)
{
clearLocations();

var XML_URI = 'SW_LAT=' + map.getBounds().getSouthWest().lat()
+ '&SW_LNG=' + map.getBounds().getSouthWest().lng()
+ '&NE_LAT=' + map.getBounds().getNorthEast().lat()
+ '&NE_LNG=' + map.getBounds().getNorthEast().lng();

var searchUrl = 'phpsqlsearch_genjson.php?' + XML_URI +
'&business_id=1000000';

downloadUrl(searchUrl, function(data)
{
var jsonData = eval('(' + data + ')');

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < jsonData.markers.length; i++)
{
var name = jsonData.markers[i].name;
var address = jsonData.markers[i].address;
var point = new google.maps.LatLng(jsonData.markers[i].lat,
jsonData.markers[i].lng);

createOption(name, address, i);
createMarker(point, name, address);
bounds.extend(point);
}

locationSelect.style.visibility = "visible";

locationSelect.onchange = function()
{
var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function searchLocationsNear(center)
{
clearLocations();

var radius = document.getElementById('radiusSelect').value;

var searchUrl = 'phpsqlsearch_genjson.php?lat=' + center.lat() +
'&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data)
{
var jsonData = eval('(' + data + ')');

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < jsonData.markers.length; i++)
{
var name = jsonData.markers[i].name;
var address = jsonData.markers[i].address;
var distance = jsonData.markers[i].distance;
var point = new google.maps.LatLng(jsonData.markers[i].lat,
jsonData.markers[i].lng);

createOption(name, distance, i);
createMarker(point, name, address);
bounds.extend(point);
}
map.fitBounds(bounds);

locationSelect.style.visibility = "visible";

locationSelect.onchange = function()
{
var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}

function createMarker(latlng, name, address)
{
var html = '<div style="width:275px;"><b>' + name + '</b> <br/>'
+ address + '</div>';
var marker = new google.maps.Marker
({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function()
{
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}

function createOption(name, distance, num)
{
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance + ")";
locationSelect.appendChild(option);
}

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.responseText, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}



function doNothing() {}

//]]>
</script>
</head>

<body style="margin:0px; padding:0px;" onload="load()">
<div>
<input type="text" id="addressInput" size="50"/>
<select id="radiusSelect">
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>

<input type="button" onclick="searchLocations()" value="Search"/>
</div>
<div><select id="locationSelect" style="width:
100%;visibility:hidden"></select></div>
<div id="map" style="width: 100%; height: 80%"></div>
</body>
</html>

[Martin]

Not meaning to nit pick with you (lol) but you might want to re-think
your query and use mysql_real_escape_string() instead of
stripslashes():

http://shiflett.org/blog/2006/jan/addslashes-versus-mysql-real-escape-string

Martin.