Placing Google Map

• 

  shadowfax1 · Member · Feb 11, 2011 at 5:40 pm

  • Copy link
  • Add topic to favorites

  How do I get the google map to the right of the ‘Amenities Column’

  Also I can’t seem to close the gap in the wording of the same column. When I highlight it and
  choose paragraph in the editor it disappears?

  Help!
  http://www.wareings.wordpress.com

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Feb 11, 2011 at 6:16 pm

  • Copy link

  It looks like you have the CSS upgrade. I’ll flag this for our Moderators so they move it to the CSS Forum for you.

• 

  panaghiotisadam · Member · Feb 11, 2011 at 8:22 pm

  • Copy link

  That’s not a CSS customization question.

  To get the map to the right, you need coding for two columns (in the HTML post editor):

  <div style="float:left;width:200px;">
  LEFT CONTENT HERE
  </div>
  <div style="float:right;width:425px;">
  MAP SHORTCODE HERE
  </div>

  As for the gaps in the wording, you have tried various things and introduced lots of extra code, plus you’ve got grey text on grey background. I suggest you delete the left column text completely and rework it before trying the above code. If you cannot do it, I can give you the complete thing you need to paste in the HTML editor if you tell me how exactly you want the column styled.

• 

  shadowfax1 · Member · Feb 11, 2011 at 8:46 pm

  • Copy link

  hmm no luck with the code…The map shortcode is the google url? Because thats where I inserted it but it didn’t move…If its not to much trouble the complete thing would be great!

• 

  panaghiotisadam · Member · Feb 11, 2011 at 9:32 pm

  • Copy link

  No, the shortcode is this:
  [googlemaps etc.etc.]

  Ok, switch the page editor to HTML, delete everything and replace it with this:

  <p style="text-align:center;text-decoration:underline;font-weight:bold;font-size:150%;">General Description</p>
  <p style="text-align:justify;">Bright Condo in the heart of Cloverdale.  ‘The Stetson’ Fully rainscreened open concept with a fabulous sized kitchen and eating area.  Good sized master bedroom with ensuite.  Large 2nd bedroom with adjoining 2nd bathroom, and laundry room.  Seperate dining and living room with fireplace.  Corner unit with windows on two sides of the home.  Central Location, within walking distance to shopping and transit outside your door.</p>
  
  <div style="float:left;width:200px;">
  <span style="text-align:left;text-decoration:underline;font-weight:bold;">Amenities Nearby</span>
  <em>Shopping, Cloverdale Raceway (Casino) Library, Public Outdoor Pool</em>
  <span style="text-align:left;text-decoration:underline;font-weight:bold;">Features</span>
  <em>Private Setting, Elevator, Wheelchair Access
  Stainless Steel Appliances
  Maple Laminate Floors</em>
  <span style="text-align:left;text-decoration:underline;font-weight:bold;">Parking</span>
  <em>1 Stall
  (Next to Elevator)</em>
  <span style="text-align:left;text-decoration:underline;font-weight:bold;">Building</span>
  <em>Floor Space 1120 sq ft
  Built 1986
  Rain-screen upgrade 2010</em>
  </div>
  <div style="float:right;width:425px;padding-top:2px;">
  [googlemaps http://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=5977 177B ST Surrey, BC   V3S 4J7&aq=&sll=49.891235,-97.15369&sspn=45.077228,135.263672&ie=UTF8&hnear=5977 177B St, Surrey, Greater Vancouver Regional District, British Columbia V3S 1V2&ll=49.11125,-122.730393&spn=0.002778,0.008256&z=14&iwloc=A&output=embed&w=425&h=350]
  </div>

  I’m not sure what will happen with the text color, because of the CSS changes you’ve made, but start with this and we’ll see.

• 

  timethief · Member · Feb 11, 2011 at 10:03 pm

  • Copy link

  @panaghiotisadam
  Thanks for wading in and helping. :)

• 

  shadowfax1 · Member · Feb 11, 2011 at 10:43 pm

  • Copy link

  Still can’t get the map to the right and up…

  http://www.wareings.wordpress.com

• 

  hallluke · Member · Feb 12, 2011 at 1:01 am

  • Copy link

  You want to surround your left hand column and the maps shortcode both in an instance of the following code which will set them up like columns:

  <div style="width:50%; float:left;">
  ...
  </div>

• 

  panaghiotisadam · Member · Feb 12, 2011 at 4:47 am

  • Copy link

  @shadowfax1:

  “Still can’t get the map to the right and up…”

  What does that mean? I gave you a complete worked-out solution for your whole page, and you didn’t try it. If you fear it might mess your current page, create a new one, switch the editor to HTML, paste all the code I’ve given above, and check the result.

• 

  raincoaster · Member · Feb 12, 2011 at 6:39 am

  • Copy link

  Trust him. I don’t normally advise blindly following advice on the internet, but panos doesn’t waste your time with tricks. It will work. Just do it.

• 

  auxclass · Member · Feb 12, 2011 at 6:55 am

  • Copy link

  I didn’t trust him – but I did test – pasted all the code into html mode in a Post in 2010 and looks great to me – betting against @panaghiotisadam is a loosing deal. I have used several tips from his site and they all worked great.

• 

  raincoaster · Member · Feb 12, 2011 at 7:13 am

  • Copy link

  He’s a cinch. I love people whom I can trust absolutely, and he is one.

• 

  shadowfax1 · Member · Feb 13, 2011 at 5:32 pm

  • Copy link

  Hi panaghiotisadam
  I did replace the existing code with your suggestion and the only changes are what you see. The google map is still in the same location. My appologies for taking so long to get back to you.