I've having an issue with Google maps not centering on the pin. See an example of the issue here: http://www.heyheygorgeous.com/enzocoboston/test
You'll see that if the google map is placed in the first tab, it works. Click on the other tabs and the google map doesn't center on the pin.
Please let us know what to do to resolve this issue. Thanks.
For the google map to work inside a hidden tab, try setting the iframe width of the google map to 100% instead of using a px width. Example: width="100% height="350"
If you're using wordpress, just grap an iframe plugin, otherwise WP will erase the tags when you switch between VISUAL and HTML views.
You can see an example here: Fairmont Scottsdale Princess (click "map")
Related
I am creating a search page based on continents. And I need to let the user click(choose) a continent and based on this choice. I do backend logic.
What I tried is to set a world map as a background of a div. And on this map I put the linkbuttons that represent the continent (as attached).
The problem is when I resize the screen the linkbuttons go into wrong positions. So please help me to find a way to PIN the buttons (continent names) to the map when resize or open the page on different screens.
Thank you.
Here is a link to a youtube video that shows you how to use google maps API. This may make what you are doing a little easier. I recently used this to create a mobile tour app.
Google Maps API
Thanks for trying to help. I just solved the problem and likeed to share the solution.
I have solved this using map on the image. So I made the continents clickable on the image without putting any controls on the image.
I have built a WordPress website to be used as an admin only interface. I have grabbed a Google Maps API key and copied the example code from the tutorials at:
https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
I have copied the code provided by Google into an admin page template but nothing is showing. When I inspect the page content I can see that extra styling is added:
<div id="map" style="position: relative;overflow: hidden;">
If I turn off either of those stylings I can see the map appear but it does not fit at all even if specific heights and widths are defined.
I wondered if anyone else has had any luck trying to achieve the same thing?
Turned out it wasn't the css addition at all, it was that the map div needed to have the height defined in pixels instead of percentage!
I have embedded the Yammer news feed onto a SharePoint page. It works fine, but recently a second vertical scrollbar appeared. It seems to be part of the iframe. Does anyone know of a way to remove this extra vertical scrollbar?
Here is the image for scroll - bar
We are also experiencing the same issue. This wasn't a problem prior to December, but it appears there was an update that's included adding overflow-y:scroll to the html tag within the iframe.
It's easy to see the problem from the Yammer Widget configuration page: https://www.yammer.com/widget/configure
As the issue is within the iframe, I believe we have to wait for an update from the Yammer dev team to resolve...
update - here's a screenshot (i'm new and it wont let me comment)
screenshot of yammer embed
it looks like Yammer fixed the problem! I would check again to see if the issue is resolved
I'm new to using AddThis, or any form of social media toolbars etc, however I have the following image:
http://songhype.com/wp-content/themes/song/images/social/twitter.png
I need to code this into a social icon, along with a Facebook version.
My initial idea was to just add that in as an image, and then position the text for the number of followers/tweets to be over the top of the grey portion, however I've found this to not work, is there any other method I could use?
With Twitter, you need to get a site key and use their API. Facebook provides a pretty simple copy/paste functionality and has the basic instructions for how to do it on their page.
If you check the HTML for the you can replace the image with your own.
https://dev.twitter.com/docs/follow-button
https://developers.facebook.com/docs/reference/plugins/like/
I need to customize a Google Maps InfoWindow.
In particular I want an image to "hang over the edge" of the InfoWindow. But when I place the image absolute within the InfoWindow-DIV it disappears behind the border of my InfoWindow.
Adding a z-index changes nothing.
Hope I made my point clear. Any ideas?
There are many custom window solution , see this one for example:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want something outside of the infoMarker border, you'd better use a custom solution.
The built in one is good for the simple stuff.