Jump to content

Archived

This topic is now archived and is closed to further replies.

interactivelimited

How to Add Google Map?

Recommended Posts

interactivelimited

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!

Share this post


Link to post
Share on other sites
atcdomainsolutions

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

Share this post


Link to post
Share on other sites
interactivelimited

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 :) !

Share this post


Link to post
Share on other sites
interactivelimited

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

Share this post


Link to post
Share on other sites
epimazzo

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.

Share this post


Link to post
Share on other sites
interactivelimited

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!

Share this post


Link to post
Share on other sites
Danny

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 ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • MobileParity
      By MobileParity+
      Hello all,
       
      I am testing DMS 2 on Flywheel. I added the DMS 1.x shortcode syntax for a Google Map however it is not rendering on the screen. I only see the actual shortcode. I have use the sections for Text Box, Post Loop, and Media Box however the shortcode still will not work. Do I have to use DMS 2 Pro in order to use the Google Map functionality?
       
      See the image here: http://screencast.com/t/jm3i9JIQwj
       
      Regards,
       
      AG
×