How can I put multiple Google maps on a site nicely? 4

[nan7388]

I'm doing some work for a company that has 5 offices. One day one of the Principals wrote to me and directed me to a site that had a map that slowly zoomed in; it was made with Flash. I'm not good with Flash, so I asked just what he wanted in terms of end result, and he wants something that looks "neat" but shows basic "map" directions to the 5 offices.

I decided that Google interactive maps would probably do the trick. The visitors could move the maps around, zoom in and out, get a link to directions, etc. and I think it would make him and the others happy.

I got my Google API number and have read their documentation along with info from many other sites. My first attempt at making this work was to make a tabbed page with 1 tab for each office. It was pretty, but I soon realized that I was in trouble, because each Google interactive map needs separate heading info as well as separate body info. I know that I can make a map with all five offices on one map and I did make that, but it doesn't really show any office location well as the distances are far away enough that you're looking at a big chunk of the east coast and also Puerto Rico.

I'd really like to have 5 interactive maps available from one page (or maybe 6, if I include a map with all offices shown on it), but now I'm at a loss on how to present this. I know this must seem like a simple problem to most of you, but I've been struggling with how to solve this. Maybe I could show the interactive map with all 5 offices and have links to separate pages for the other office maps? I was hoping to keep all maps on one tabbed page like I started out with, but with obvious needed coding corrections. I just don't know what corrections to make!

I thought of maybe using frames <gasp> but I've never used frames before and thought it might not be the best idea in the world. I do try to make whatever I can be accessible and XHTML and CSS valid and I tried using iframes, but didn't have luck in getting it to go. I thought it should work, but I've thought a lot of things in my life... ; )

When I try iframes in each tabbed part of the page, the first map comes out fine, the others all fail. From what I saw, when using iframes, I could have multiple body html info, but only one set of "head" info. In the head section, I tried changing one needed javascript and made a number of scripts, naming each with the state name. example - one javascript had id="mapNY" - the next script had id="mapPA" - and another id="mapPR" etc., but it didn't work. They were all identical except for id and name. In the html of each iframe, I obviously followed with the same id names in the scripts according to office state. I think it should work, but I don't know what I'm doing wrong.

Any ideas or suggestions? I'd really appreciate your assistance. (Sorry if this is a lame question, but even if it is, I just don't know the answer.)

Many thanks in advance, Nan

 

[audiopro]

To cover a large area is a problem and will end in either a large image or a not very detailed map.
How about a general map covering the area with all the offices marked on it. Each office location is clickable to show a new page containing a more detailed map for that particular office and all the office details etc.

Keith

 

[TamedTech]

Google maps is quite a hungry little app and take a little while to load so i wouldn't recommend putting multiple instances on the same page, it'll be a bugger.

The API is quite a clever little set of tools that'll alow you to achieve all sorts of things, but your best bet is to post on the Google Discussion boards, i know i've asked some rather heavy questions in the past and they've always had an answer.

I would suggest that you use a single map, and then have the information bubbles for your makers display another map window inside.

Check out the groups though, i'm sure someone has done what you are trying to achieve.

http://groups.google.com/group/Google-Maps-API

Thanks,

Rob

 

[Foamcow]

Since Google Maps is powered with Javascript then why not use your initial tab model and replace which map is displayed in the tab using Javascript.

When you create a Google map you give it a unique identifying name. You then tell the browser to show the map with your name in a container on your page.

Take this code (randomly grabbed from one of my sites).

function load() {
if(![b][COLOR=blue]document.getElementById("placeholder")[/color][/b]) return false;
  if (GBrowserIsCompatible()) {
    [b][COLOR=red]var map = new GMap2(document.getElementById("placeholder"));[/color][/b]
    [b][COLOR=green]map[/color][/b].setCenter(new GLatLng(52.18958846935747, -2.2149789333343506), 16);
  }
	//Add controls
	[COLOR=green]map[/color].addControl(new GSmallMapControl());

	
	// Create custom icon
	//var icon = new GIcon();
	//icon.image = "images/mapIcon50.png";
	//icon.shadow = "[URL unfurl="true"]http://labs.google.com/ridefinder/images/mm_20_shadow.png";[/URL]
	//icon.iconSize = new GSize(50, 46);
	//icon.shadowSize = new GSize(22, 20);
	//icon.iconAnchor = new GPoint(6, 20);
	//icon.infoWindowAnchor = new GPoint(5, 1);

	// Add marker

	  var point = new GLatLng(52.18958846935747, -2.2149789333343506);
	  var aespoint = [COLOR=green]map[/color].addOverlay(new GMarker(point));
	
	
}

The blue bit is telling the browser which element on my page I want to display the map in. In this case it's a div element with an id of "placeholder".

The red bit then creates the map. In this case I've elected to call it "map" but it could just as easily been called "office1", "brian" or whatever. The bit of Javascript is creating an "instance" of the Gmap2 object An object is a lump of javascript code that has lots of useful functions and tools (like creating markers, lines, controls) we can "call" to do things to our maps.

The important thing is that the code that follows, for placing markers and positioning the map refers to that name. This is the green bit. See how the code is using the name "map". This makes sure that the markers etc that I am creating get stuck to the correct map. I'm using the "instance" name to target a specific map.

So, you could create multiple placeholders (with different names) and multiple maps by creating a new "instance" of the Gmap2 object for each map and assigning each a different name.

These could be displayed all on a single page, or if you are feeling saucy you could dynamically change which instance is being shown in a single placeholder by manipulating the DOM with Javascript.


Now... even though I've said all that I can't recall putting more than 1 Google map on a page at 1 time. But I can see no reason why this wouldn't be possible.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[ChrisHunt]

Here's some more possible approaches...

1) Dead easy - Just have one page per office, each with it's own map. Maybe you could find some other stuff to put on there like a photo of the office, etc. You might think this is cheating though!

2) As Foamcow says, the map is quite a hungry beastie, so it may not be wise to have too many of them. Instead, have one map and manipulate it with Javascript to point to the office in question. You'd have a list of office addresses, with all but the first set to [tt]display:none[/tt] and the map centered & zoomed on that office. When the user clicks another tab, a different office is displayed and the map is recentered on the new location.

In fact, you could make it simpler by displaying all the offices' details (so they can be taken in at a glance by people in a hurry), displaying a single map with all the offices marked on it (centred on the first), and having a link by each office's entry to "re-center the map on this office".

Remember to make sure that visitors can get something out of your page when they have Javascript switched off. One useful trick is to have any text that talks about the map to be set to [tt]display: none[/tt] in the stylesheet, and to have a script which runs onload to make them visible again.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

It was TamedTech that said about the app being hungry. It's a good point. But I'd still be inclined to try it.
There were bad memory leaks in the first version, Gmap2 is supposedly better.

Here's another option.

Create a page with 5 static images of the map, quite small, but not quite thumbnails.

Then just link from each of those to a page with the google map and office details... as Chris suggests.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[TamedTech]

Yes the whole one ma per page is a good idea.

Gmap2 is certainly better than Gmap1, i mean the feature set alone is vastly superior to that of the origional.

You are however still going to have some loading issues, and dont forget that because its an API which is accessing data remotly, its not just a case or the servers having a chat, its your browser talking to the server, so if your user is running anything less than ADSL they'll see it even more.

I mean i have a single Gmap2 application running on one of my sites and there is a noticable wait on the page after everything else has loaded before the map drops into its Div as it should do.

Also keep in mind that the whole conecept behind google maps is its sheer scale and the ability to present lots of information points to the user from one resource.

It seems a little defeatest to go to all the bother if integrating a dynamic and interactive map if your just going to show a close zoom of a single marker point.

I still think you should opt for the 1 map, and hit it with a host of different markers, each with indevidual bubbles with all the address information for each office held in them.

If the user really wants a close up view then they can hit the + button a few times and pan around to thier hearts content.

Rob

 

[nan7388]

Many thanks to all of you, I truly appreciate it! You were right to point out that my original plan would keep people waiting for the maps to appear on their monitors. I know the boss that requested a map which shows directions is quite impatient and he'd balk at a long wait time. I have a pretty quick connection here, so things show up faster for me, but I don't want people cooling their heels while waiting for my maps to show up.

I like the idea of having either one map with all offices and make each office location a link to its own interactive map or small images of the office locations which would click to its Google map.

At first I was going to use Mapquest maps, but they were static. Those static maps did have a link to the Mapquest site where the map was interactive, but I didn't think they'd compare to the Flash map that the boss admired. At that time I was planning on putting up a form next to the static map so folks could put in their starting address to get door to door directions.

To audiopro, TamedTech, Foamcow, and ChrisHunt; many thanks for your great ideas. I will check out the Google groups that you suggested, TamedTech and will keep in mind Google's hunger.

Foamcow, I'll probably abandon my original hope to put the 5 maps on different tabs, but I have some questions about the code you showed me. I changed the lat/long numbers slightly, but they are not accurate. I don't think I have this right at all, but I'm trying. Here's what I thought, but first, looking at your top section,

function load() {
if(!document.getElementById("placeholder")) return false;
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("placeholder"));
    map.setCenter(new GLatLng(52.18958846935747, -2.2149789333343506), 16);
  }

?? Would I change it to read something like,

function load() {
if(!document.getElementById("nyOffice")) return false;
  if (GBrowserIsCompatible()) {
    var ny = new GMap2(document.getElementById("nyOffice"));
    map.setCenter(new GLatLng(52.18958846935747, -2.2149789333343506), 16);
  }

function load() {
if(!document.getElementById("ctOffice")) return false;
  if (GBrowserIsCompatible()) {
    var ct = new GMap2(document.getElementById("ctOffice"));
    map.setCenter(new GLatLng(51.18958846935747, -3.2149789333343506), 16);
  }

function load() {
if(!document.getElementById("prOffice")) return false;
  if (GBrowserIsCompatible()) {
    var pr = new GMap2(document.getElementById("prOffice"));
    map.setCenter(new GLatLng(50.18958846935747, -4.2149789333343506), 16);
  }

 //Add controls
    map.addControl(new GSmallMapControl());

    
    // Create custom icon
    //var icon = new GIcon();
    //icon.image = "images/mapIcon50.png";
    //icon.shadow = "[URL unfurl="true"]http://labs.google.com/ridefinder/images/mm_20_shadow.png";[/URL]
    //icon.iconSize = new GSize(50, 46);
    //icon.shadowSize = new GSize(22, 20);
    //icon.iconAnchor = new GPoint(6, 20);
    //icon.infoWindowAnchor = new GPoint(5, 1);

    // Add marker

      var point = new GLatLng(52.18958846935747, -2.2149789333343506);
      var aespoint = map.addOverlay(new GMarker(point));

 // How do I put in the other points? Like this or no?

     var point = new GLatLng(51.18958846935747, -3.2149789333343506);
      var aespoint = map.addOverlay(new GMarker(point)); 
 
     var point = new GLatLng(50.18958846935747, -4.2149789333343506);
      var aespoint = map.addOverlay(new GMarker(point)); 
}

Or do I have it completely wrong? Probably. You're probably laughing. I'm not sure, but I think what I wrote would completely confuse the browswer. I don't know how to write it so that the browser would know which map to make appear. If I have it wrong, I could take my question to the Google forums, but if I got what you meant; that'd be good. And not likely. LOL Really, if I've got it wrong, please just say so and I'll probably abandon the idea completely in exchange for the betters ideas given here. Please don't waste your time giving me the correct code. I just wanted to find out if I was picking up what you put down - in a manner of speaking.

To all, I really do appreciate your well thought out ideas and the time you took out of your lives to help me.

Thanks again everyone! Nan

 

[ChrisHunt]

I'll probably abandon my original hope to put the 5 maps on different tabs

You don't have to do that, you just have to re-think how to implement it.

Firstly, there's no such thing as "tabs" in HTML. Any type of tabbed interface you see is faked using clever graphics and linking strategies. So to get your "5 maps on 5 tabs" layout, you have a row of links along the top (or bottom or wherever) styled to look like a row of tabs, I'll come back to what they do. Then you have a rectangular area below them to represent the open "tab". Within that area you have the details for all your offices, but only one of them is visible, the rest are [tt]display:none[/tt]. You also have your (only) Google Map, centred on the visible office.

When you click one of the tab/links, it fires a bit of scripting that makes the appropriate office details visible and hides the others, and also re-centers the map on the new office. Thus it appears that you've got 5 tabs and 5 maps, but you've only really got one.

You can see an example of Javascript tabs, albeit without the Google Maps stuff at napitalia.org.uk/eng/piave1.shtml . It's work in progress, but should give you the idea.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[nan7388]

Thanks ChrisHunt!

You are so very right that I need to rethink how to implement what I'm trying to do. I went to your site and saw what you did and it's so close to being just what I want! It's certainly the same idea and I'm very thankful that you gave me a chance to take a peek.

Now, I'll need to find a good script that'll make my tabs work - I think I can do that and it never occurred to me that I could use one map, but centering it in different places. Well, I thought of using one map as was mentioned above, but now I think I can have my cake and eat it too!

I've worked on other things using either "display: none" or just use in links class="current" for the active link to give it a certain look. That's pretty much what you're doing, but you have a js that makes the tab appearance work. Many thanks, I'm back to researching how to make this work with a new mindset. I appreciate it.

Nan

 

[Foamcow]

Where you have

map.setCenter(new GLatLng(50.18958846935747, -4.2149789333343506)

"map" should be the name of the particular instance of the Gmap that you wish to set.

Likewise, when setting the locations of the markers, I had used aespoint as the name of the marker. You should change each one to a unique name.

var point = new GLatLng(51.18958846935747, -3.2149789333343506);
      var <uniqueName> = <mapInstanceName>.addOverlay(new GMarker(point));

Do it like that replaceing the <uniqueName> and <mapInstanceName> accordingly.
[/code]


<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[nan7388]

Thanks Foamcow,

I see I changed the wrong name. I'll be working on this, but then have to take a couple of weeks off to do something else entirely, BUT I will return right here to read all of your posts again and get it all correct. I know I can do this, I've done harder things, but sometimes something becomes a roadblock and the answer doesn't seem simple. I know when I put your answers as well as the others together, I will have what I need to make it all look good.

Thanks everyone, you've been very helpful. I'll write back in just over 2 weeks - well I'll need some more time to restart it - and I'll let you know how I did. All of you gave me great ideas and I hope I can be of help to someone in the future about things that have come easily to me.

Nan