Tuesday, August 13, 2013

Add A Google Map to Wordpress Contact Page

This tutorial is assuming you know how to create a page or a post in Wordpress. Additionally this will provide info to add a map to any page, not just a contact page.

Get your Map code

  1. Goto Google and Google the address you want to get your map for - click on the map picture that results. If that doesn't work goto https://maps.google.com/ and do your search.
  2. Once the result is displayed change your view to whatever you want to display on your page. You might change to a satellite view or a traffic. You may want to tweak other settings in this window. If it is displaying on this page then it will display on your page
  3. Click the Link Icon (photo below 1.)
  4. Click and copy the <iframe> code (Photo above 2.)
  5. Go to WordPress and click to edit the page/post you want to add your map to
  6. In your editor Click "Text" tab (Photo above 1.) If you have content on this page already you will need to place your cursor after/before the content you would like the map displayed
  7. Update or Save your page/post

To Resize the Google Map

If your map isn't the size you want you can edit the code that Google supplies and change the size.
  • In the code that you pasted above look for the Width and Height Parameters. It should look like: <iframe width="425" height="350" . . . . These parameters describe the size of the map that displays
  • To make the width larger type in a larger number. I changed mine from 425 to 800. This is in Pixel increments. This number should be less that 1028
  • To make the height of your map larger edit the height="350" value. Change the 350 to something larger. I used 700.
  • Once you've set the correct sizes click Update and save your post
  • Be sure to leave the "Quotation Marks" around the numerical value
Good Luck!

No comments: