Dropping location pins?

Freeway
1

I came across this today and I really like the effect: http://www.ahharris.com/locations/

How is the dropping location pins done?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Wow. That is really slick, and the code looks very straightforward. There is apparently an effect you can call on the Google Map API: animation: google.maps.Animation.DROP and they simply added this to their setup function. The only other trick here was that they set up an array of locations, and then called setTimeout() on each element in the array 50 milliseconds apart. This gives the effect of the pins zooming into the page seemingly at random.

Now, I’m a loop man myself, so I would not have written out 43 lines of setTimeout (function() {addMarker(map, stores[33]);}, 1700);; this whole block of the code could be expressed like this:

var time = 0;
for(i = 0; i < stores.length; i++){
	time += 50;
	setTimeout( function(){ addMarker(map, stores[i]); }, time );
};

Now if you want to do this yourself, first, there’s no easy way to do it with Actions – the Google Maps Action only supports a single marker per map. But this is an extraordinarily clear example of how to do it, and you could hand-code this in the head of your page without a lot of trouble, simply by following their example.

Your first step would be to get the Google Map lat/long string and complete map URL for each location you want to map. Once you have these, you need to organize them into the order you want them to appear, and set up an array structure to hold them. If you look at the block of code in your example page that begins with “var stores = [”, that’s the beginning of the array. Each store (in their example) is represented by an element of that array, and then because they also have structured data to represent each store. If you have this level of detail, then by all means organize it the way they did – as a separate sub-array inside the stores array. Theirs is laid out as:

[latitude, longitude, Zip code, street address, city, state, 
Zip code, hours, phone, complete Google Map URL]

No idea why they have the Zip code in there twice, but that’s just what they did. There’s another way to do this that can be a lot clearer and easier to see when you’re working. Make each element of the array an object instead:

{lat:12345, long:23456, zip:12345, street: '123 Cherry Lane', 
city: 'Anytown', state: 'PA', hours: '9am - 5pm', phone: '215 555-1212',
map: 'http://maps.google.com/maps?f=q&amp;source=s_...'}

The next step would be to construct the function to build the map and markers. Start by copying their script into your Freeway page through the Page / HTML Markup dialog. Be sure to add the link to the Google Maps JavaScript library above the script block:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

From the main menu, choose Page / Extended and press New. In the resulting sub-dialog, enter:

  • Name: onload
  • Value: initialize();

Okay out of the stack of dialogs. Now draw a single DIV (layered HTML box) named map_canvas where you want your map to appear. Preview, and see if you get any sort of map at all. If you don’t, it may be because Freeway doesn’t like to include underscores in element names, so you may have typed map_canvas and got mapcanvas for your trouble. If this is the case, just remove that underscore from the script (9th line of code inside the initialize function).

Their addMarker function concatenates this data into a string of JavaScript and HTML for the map to use when constructing the marker. Note how they use the numerical indexes of the sub-array (store[3] etc) to indicate which part of the data to use in each iteration. If you had used the object notation instead, you would use store[‘zip’] instead to mean the same thing (and be better able to keep it all straight in your head without a cheat-sheet).

Once you have their locations working in Freeway, strip out their locations and add in your own. If you’ve used their code exactly, note that you’ll have to have once line of the “setTimeout…” code for each element in the array of locations. If you replaced that whole block with my tidy loop, then it’s all automatic, you’ll only have a marker for each element in your data array.

GIve it a try, or holler off-list if you’d like me to take it on as a project on your behalf.

Walter

On Oct 23, 2011, at 10:04 AM, Kelly Crossley wrote:

I came across this today and I really like the effect: http://www.ahharris.com/locations/

How is the dropping location pins done?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Wow!

Thanks Walter. I really appreciate all of the time you put into this. I’m just starting a website for a new client. I’ll let you know when I need your help.

Best,
Kelly

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options