Embedding Google Maps into a page is fairly easy, but there are little things you can do to improve the appearance and usability. There are also several things you can do if you dig into the API, but the fixes this article covers are fairly painless to carry out. The default Google Maps iframe embed does not come with a map marker. Here are some very simple hacks to fix that.
The normal iframe looks something like this: (spaces added so you can see what’s going on).
<iframe width="425"
height="350"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="https://maps.google.com/maps?f=q&
source=s_q&
hl=en&
geocode=&
q=333+E+34th+St,+New+York,+NY&
aq=1&
oq=333&
sll=37.269174,-119.306607&
sspn=16.742323,33.815918&
ie=UTF8&
hq=&
hnear=333+E+34th+St,+New+York,+10016&
t=m&
z=14&
ll=40.744403,-73.974467&
output=embed">
</iframe>
The q part of this string is the query of the location that Google Maps has to find. If we change that to daddr (for destination address), a green marker labeled “B” will appear on the embed. If the user clicks through, they will go to a Google Maps screen where the destination address is already filled in.
The second simple thing we can do to make it easier for users to find a location is add a form for them get directions via Google Maps.
<code<div class="directions"><form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr" class="dir-label">Enter Your Location for Directions</label>
<input type="text" name="saddr" class="dir-input" size="16" />
<input type="hidden" name="daddr" value="A List Apart, 333 E 34th St, New York, NY" />
<input type="submit" value="Get directions" class="dir-button button" />
</form></div>
This produces a single field form that gives the user directions to the destination business location. Users will know the map and the form are connected because they are close to one another. You will have to add custom CSS to style the form and button to match the specific website. These are simple things we can do, without digging into the Google Maps API to improve user experience.
If you need more granular control over the display of your Google Maps, read my post on Adding Custom Styles To Google Maps.