Now I know it’s not rocket science, but if your in a rush and quickly need a map on your web site then the quickest and easiest way is to use google maps.

There are quite a few different ways of how to go about this and depending on what you want to achieve some may be more correct then others, but I’ll just show you the quickest one here. Ok, let’s go…

Step 1. Login
Go to google maps and sign in: http://maps.google.com/
You will need a google account to do this, but google accounts are very handy anyway, plus they are free and registration is rather quick and painless.

Step 2. Find your destination
Enter the search address and let google find it for you.

Step 3. Click “Save to My Maps” and create a new map.
On the map a pin will point to the address and in the speech bubble of the marker there is a link that allows you to “Save to My Maps”. After clicking that link choose “Create a new map” from the drop down box . Change the title to the a name of your choosing and add/change the description to whatever you want.
You can also change the type of marker used to highlight the position by clicking on the blue marker in the top right corner of the speech bubble.

By clicking on the marker in the map and dragging it to a new positoin you can also fine tune the location if it isn’t spot on. You don’t need to worry about the details too much since you can always come back and edit them later.

Step 4. Click “Save” and “Done”
Click “Save” and “Done” to save the new map permanently to the profile of “My Maps”

To edit things later on you can always return to the “My Maps” box and click on the link you just created. To edit the text inside the speech bubble click on the “Edit” button on the left. Click “Save” and “Done” on the left to make changes permanent.

Step 5. Get link for website and adjust style
After editing the entry click on the “Link to this page” link on the top right corner of the map. Copy the <iframe> link into a text editor and feel free to adapt anything you might need to suit your layout, e.g. you can replace

width="425" height="350" with

style="border:1px solid #0F3CFF;padding:2px;" width="640" height="480"

to add a blue border and make the map window a little bigger. Feel free to play around and try different things.

If all this code doesn’t mean anything to you, just copy it as is.

Step 6. Paste link into the webpage
Simply paste the copied code into the part of your webpage where you want the map to apear and then…

Step 07. Admire the results in your browser

Related Posts:

• No Related Post