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>
--
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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
