How to Add Google Map?

[interactivelimited+ 1]

This seems like it would be simply, yet I am pulling my hair out.

 

I want to add a Google Map to my page.

 

For responsive purposes, I am using an iFrame with a specified width (350px) and Height at 100%.

 

I am placing the iFrame code in a TextBox.

 

When the page renders, the iFrame is 186px - which is way to small (around 425px is what the section is rendering at.)

 

I tried adding a class to the column and the TextBox:

.map-text-box {
  min-height: 300px;
}

.map-col {
  min-height: 300px;
}

But no dice.

 

What am I missing here :phew: ?

 

Thanks!

[atcdomainsolutions+ 63]

This seems like it would be simply, yet I am pulling my hair out.

 

I want to add a Google Map to my page.

 

For responsive purposes, I am using an iFrame with a specified width (350px) and Height at 100%.

 

I am placing the iFrame code in a TextBox.

 

When the page renders, the iFrame is 186px - which is way to small (around 425px is what the section is rendering at.)

 

I tried adding a class to the column and the TextBox:

.map-text-box {
  min-height: 300px;
}

.map-col {
  min-height: 300px;
}

But no dice.

 

What am I missing here :phew: ?

 

Thanks!

I was able to add a Google Map to the Widgetizer after creating a sidebar for it.  It's on a site I build for a client at http://atcdomainsolutions.com/shanecgriffin/

 

It's in the footer.

 

I basically used the plugin Black Magic TinyMCE.  Added it to a custom sidebar (Custom Sidebar plugin) named "Footer" or whatever you want to call it.  Once I dropped the Black Magic widget into the sidebar (this was all in the Wordpress backend area), I added the embed code from Google Maps into the HTML section (NOT the Visual editor) of the Black Magic box.  Save and then go to the front end, add the Widgetizer to a column or something and then select the sidebar you created (in this example, it was Footer) and your map will show.  You can play with the embed code from Google Map to resize it. 

 

James

[interactivelimited+ 1]

atcdomainsolutions - Thanks for the reply! I might try that Widgetized route.

 

I am using Custom Post types, and hope I can find a more elegant solution... otherwise I would have to crete a lot of widgets :) !

[Rob 547]

Did you try our responsive google map system http://docs.pagelines.com/tutorials/shortcodes

 

Scroll way, way down on the page.

[interactivelimited+ 1]

Ah, that is perfect. I didn't know that shortcode existed.

[epimazzo 0]

Hi Guys,

 

Rob, I applied the Map system you mentioned but if you type down a complete address like street name, number etc...sounds it doesn't load properly and stuck.  May we use a short code generated by Google directly from its website? Will it work?

 

Thanks.

[interactivelimited+ 1]

epimazzo,

 

I later discovered that you can use the iframe directly from Google.

 

Change the WIDTH to 100%, and the Height to a reasonable size.

 

I did the opposite, which caused by initial problems.

 

Good luck!

[Danny+ 1,327]

epimazzo

I have not encountered this issue, can you provide an example address for us to test please, it could well be an issue with Google Maps itself. Have you tried using the same address using the iFrame code provided by Google, does the same error occur ?