I am about to start designing a store locator for a business. I had a few questions on the best route to take. The main questions are located in bold.
There will be two columns, 1 with the map itself and 1 with the list of all stores currently located in the view of the map. I am hoping to have the google map to be loaded zoomed onto a map of the US with polygons around the states that have stores in them. The polygons don't need to be loaded dynamically, they can be manually edited from this list: Geo Boundaries
Is there any function or method you would recommend I use that would dynamically figure out which marker/store information to display in the 2nd column simply by seeing which markers are currently in view? For example, lets say the USA map is loaded, 2 states are have polygons on them (Michigan and Floria). Every michigan and florida dealer is located on the right side. If the person clicks the polygon of Michigan, then the map is zoomed in on all the markers located in michigan, and the column is updated with only michigan markers. If the client zoomed in again to southern michigan, only the markers still currently in view are displayed on the column.
My second question, is that the stores will have certain "properties" to them that I wish to have some sort of filtering system for the map. Lets say the stores could be be categorized if they speaked spanish, or if they where a repair center. If the checkmark is pressed for "speak spanish only stores" then all stores who do not speak spanish would be unloaded (or it would refresh with only spanish speaking stores). Very similar to sprint's site: Sprints Store Locator (however, I am looking for a AJAX solution) Edit: better yet the ace hardware one: AceHardware Locator Is there a built in method that has this functionality of filtering marker matches, or what would you propose as a way to do this?
Please note: I would like to avoid the use of any databases simply because there is no need for a database anywhere else on this site and it would seem wasteful to run MySQL simply for this functionality. I would prefer avoiding storing long. lat. in a file, but I can do so if needed. The stores will not change often and I do not need to use GeoLocating to get Lat. Long. via addresses.
Jquery will be loaded by default so I am wondering if the use of this plugin: http://googlemaps.mayzes.org/ would be recommended or not. It's my understanding that he uses google maps v2 and that v3 is much more advanced and easier to deal with.
Any examples/links of sites that have any or all functionality I am seeking would be helpful.
Here is a solution for filtering stores by state. You will need to implement language or other filtering options but the general structure is there. The basic idea is that you keep all your store data in an array and simply set markers map to null if they do not meet filtering criteria. I used text matching for state name - if you want to be really fancy you can implement a check if a click happened in polygon boundaries instead.
I used jQuery to load and process the state xml data (as well as display the store list), so you will need to make sure that you have data stored on the same server as your script.
<html>
<head>
<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script>
var map;
var stores;
var options = {
currState: ""
}
//sample stores data - marker Obj will store reference to marker object on the map for that store
stores = [{
"name": "store1",
"lat": "37.9069",
"lng": "-122.0792",
"state": "California",
"languages": ["Spanish", "English"],
"markerObj": ""
}, {
"name": "store2",
"lat": "37.7703",
"lng": "-122.4212",
"state": "California",
"languages": ["English"],
"markerObj": ""
}, {
"name": "store3",
"lat": "39.251",
"lng": "-105.0051",
"state": "Colorado",
"markerObj": ""
}]
function init(){
var latlng = new google.maps.LatLng(37.9069, -122.0792);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
showStates();
showStores();
}
function showStates(){
//load the XML for state boundaries and attach events
$.get("states.xml", function(data){
$(data).find("state").each(function(){
coord = [];
state = $(this).attr("name");
stateCol = $(this).attr("colour");
$(this).find("point").each(function(){
lat = $(this).attr("lat")
lng = $(this).attr("lng")
coord.push(new google.maps.LatLng(lat, lng));
})
//draw state poly
statePoly = new google.maps.Polygon({
paths: coord,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: stateCol,
fillOpacity: 0.5
});
statePoly.setMap(map);
//attach click events to a poly
addListeners(state, statePoly, coord);
//attach click events to poly
})
})
}
function addListeners(state, poly, coord){
google.maps.event.addListener(poly, 'click', function(){
//zoom in to state level
bounds = new google.maps.LatLngBounds();
for (i = 0; i < coord.length; i++) {
bounds.extend(coord[i])
}
map.fitBounds(bounds);
//do store display and filtering
filterStoresByState(state);
});
}
function showStores(){
for (i = 0; i < stores.length; i++) {
var myLatlng = new google.maps.LatLng(stores[i].lat, stores[i].lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
//store the marker object for later use
stores[i].markerObj = marker;
//generate a list of stores
$(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>")
}
}
//do the filtering - you will need to expand this if you want add additional filtering options
function filterStoresByState(state){
$(".stores").html("");
for (i = 0; i < stores.length; i++) {
if (stores[i].state != state) {
(stores[i].markerObj).setMap(null);
}
else {
(stores[i].markerObj).setMap(map)
$(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>")
}
}
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px;height: 400px;">
</div>
<div>
<ul class="stores">
</ul>
</div>
</body>
