scriptygoddess

I was recently asked to embed a map into a web site. Basically, the client wanted a map, with a marker, indicating where their business was, and an easy way for the user to get directions to where they were located.

The first thing you need to do is get a Google Map API key. Just a little warning – once you sign up for the API key – it will show up on the top of the page – and after you leave that page, I have yet to find where you can go to retrieve it again. So copy and paste that key in a safe place! LOL!

Here are a couple of resources that helped me out:
Of course there's the Google Maps API documentation.
Also, this was a pretty good tutorial.

In order to place a marker on the map, you need to know the longitude and latitude of your location. Originally I found "Bud's Blog, which linked to geocoder.us (US locations only) , but for some reason, it couldn't find the address I wanted to mark. I also found this this site which will give you the longitude and latitude (and that one DID find the location). Another source is TerraServer. (US locations only) Here's another one that seemed pretty good. Also, here's another one that will let you click on the map to place a marker – and then if you click on the marker it will give you the lattitude and longitude. (This was particularly useful, because for some reason the address, Google, Mapquest, and Yahoo maps all don't seem to know where the location of this particular client was). (Although you can also kind of do this with Yahoo maps by clicking on an area and then right click in the spot and selecting "drive to here" – on the left side it will give you the long./lat. location of the spot you clicked…)

You can also pull that information from the URL you get from Google Maps.
For example..
If you look up the Red Butte Gardens in Utah, (that place is GORGEOUS by the way!), and click the button to "link to this page", it will give you this URL. If you break down the pieces of that URL, you will see that one part of it looks like this:
ll=40.771182,-111.809063 (not the "sll" value, the "ll" value) That is the longitude and latitude.

I should note that there is some variances/weirdnesses depending on the source you use. If I type in the address in Google Maps, the marker looks like it is where I want it, and if I grab that "ll" value longitude and latitude and use that value on my own map – it shows the marker quite a bit off the road. (Probably more accurate to where the main building is, after their long driveway, but I want to show the location of where their driveway entrance is.) TerraServer was more accurate in that regard.

UPDATE 6/9/07: Just got this link to Tech-recipes off Lifehacker: Once your location in in the center of the map, enter the following Javascript in the address bar. This will pop up a little "alert" type window with the coordinates:javascript:void(prompt('',gApplication.getMap().getCenter()));

(FYI – you can right click on an area of the map and select "center map here" from the little menu you get)

Moving along to creating the map…
When I first started working with the map, I was using one of the samples from "Buds Blog" – however, the sample you get when you first sign up for your API key includes some code that is necessary so that IE doesn't choke. If you've already stripped that info out, and IE is choking, here is a post I found that will explain how to fix it.

Anyway, use the base-starter sample you get when you sign up for the API key and you'll be fine.

Their example had one line for setting the point and setting the point at the center, but I needed to separate it into two statements. (As well, I needed to change the long. and lat. coordinates for my location.

So this:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Became this:
var gardenPoint = new GLatLng(40.7628,-111.8246);
map.setCenter(gardenPoint, 15)
This sets a point and puts it in the center of the map. The "15" is the "zoom" level. (The higher the number the closer the zoom). Another trick with this is that if you play around with a map directly on Google Maps – do the "Link to this page" thing – look at the URL, and look for the value of "z"… that is the number of what your zoom is.

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());This adds the typical controls to the map. If you would prefer smaller controls, use this:map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

var gardenMarker = new GMarker(gardenPoint);
map.addOverlay(gardenMarker);This creates a new marker at that point, and puts it on the map. (FYI "gardenPoint" and "gardenMarker" are just variable names I made. You can actually make then anything you want.)

var gardenHtml = '<b>Red Butte Botanical Garden</b>,<br /><a href="http://www.redbuttegarden.org/">They have beautiful flowers</a><br />300 Wakara Way<br />Salt Lake City, Utah 84108<br /><br /><a href="http://maps.google.com/maps?f=d&hl=en&daddr=300+Wakara+Way,+Salt+Lake+City,+UT+84108">Get Directions to here</a>';
That makes one of those little "bubbles" and you can pretty much put anything you want to in there. I even put a link to Google maps to get directions with this address as the ending destination.

gardenMarker.openInfoWindowHtml(gardenHtml);This connects that buttle to the marker and makes it so that it's open when the map loads.

Here's the complete example.

I know that's pretty basic – but should I ever need to do that again, I wanted to save all the links and information I needed to create the same map.