CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
o_O
o_O

Reputation: 5747

Store locator using Google Maps API and no database?

Are there any examples of Store Locators using Google API v3 without using a database? All the tutorials I can find through Google are all relative to v2 (which Google says is deprecated), php (we're using python), and mySQL (we're using SQLite).

I've never made a store locator before but I assumed Google would have had it set up so that you could list addresses and Google spits out the snippet for you to paste on your site. Too naive, I know.

Well I've got the map working but I can't figure out how to add locations, display them, or allow users to input a zip and find nearby locations. Right now we only have three locations so I was hoping to find a solution that forgoes the database part and lets me specify these lat/longs directly in the Google js. I don't mind it loading all three locations on pageload.

So if you know of a way to specify the locations directly in the Google v3 snippet, please do tell. If you know how to display the sidebar with those store details and a place to input a zip, please share that too and I'd be most appreciative.

Thanks.

Upvotes: 0

Views: 3687

Answers (3)

user631644
user631644

Reputation: 1696

Something like the following should work in v3 to center the map on a user lat/lng and draw a marker at the store position:

                  var node_marker_image = new google.maps.MarkerImage('PATH_TO_YOUR_CUSTOM_MARKER_IMAGE',
                            new google.maps.Size(15, 26),
                            new google.maps.Point(0, 0),
                            new google.maps.Point(8, 26)
                  ); // adjust point parameters as needed

                  var shadow = new google.maps.MarkerImage('PATH_TO_YOUR_CUSTOM_MARKER_SHADOW',
                            new google.maps.Size(22, 26),
                            new google.maps.Point(0, 0),
                            new google.maps.Point(2, 26)
                  ); // adjust as needed

                  var user_position = new google.maps.LatLng(USERLAT, USERLNG);
                  var myOptions = {
                        zoom: 8,
                        center: user_position,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                  };

                  var map = new google.maps.Map(document.getElementById('mapCanvas'), myOptions);

                  var store_marker = new google.maps.Marker({
                                    position: new google.maps.LatLng(YOURLAT, YOURLNG),
                                    map: map,
                                    icon: node_marker_image, 
                                    shadow: shadow
                  });

If you don't want to use a DB, you could use a JSON string to represent your store locations, and parse that into some sort of location object. As for the "nearest" store feature -- over to you to figure out how you want to correlate zipcodes. Zipcodes can be quite complex and often don't follow what you might consider to be sensible geographical boundaries. US census data can be a good source for zip info. Sounds like your requirements are fairly simple, so you could just assign a central geo position to each zip you might need to worry about in a lookup table (or, again, a JSON string). You could then use the google.maps.geometry.spherical.computeDistanceBetween() method to compute the distance between the center of the zipcode of interest and your store locations.

Upvotes: 0

Steen
Steen

Reputation: 2887

I've built about 15-20 of these...but there's a lot to your question. You need to break the tasks down.

In short: check the source of this: https://google-developers.appspot.com/maps/documentation/javascript/examples/infowindow-simple

Locate the place where they insert the marker, and work on from there...that's how I started, and you can have the basic map ready in...well, a short time.

Upvotes: 0

javram
javram

Reputation: 2645

Take a look at Fusion Tables. Its an ideal way to do exactly what you want.

http://www.google.com/fusiontables/Home/

Upvotes: 1

Related Questions