Tagged: full width, google maps
-
AuthorPosts
-
August 15, 2013 at 12:32 pm #27843
Hello!
I’m looking to have a full width Google Maps on a page. I saw on https://kriesi.at/support/topic/enfold-feature-requests that you have ‘Fullscreen Google Maps Element’ as ‘requested and accepted’ and I also have been searching the forum to see if there were more explainations. I found several:
(1) https://kriesi.at/support/topic/responsive-google-map-in-slider#post-125226
(2) https://kriesi.at/support/topic/google-maps-in-full-width-slider
(3) https://kriesi.at/support/topic/googlemaps-with-predefined-height
I went with (1) and set width to 2560 so on big screens it’s also full width, but on smaller screens, the center of map just goes out. I guess this is the responsive issue you where talking on the topic?
<iframe width="2560" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Madrid,+Spain&aq=0&oq=madrid&sll=37.0625,-95.677068&sspn=59.249168,135.263672&ie=UTF8&hq=&hnear=Madrid,+Community+of+Madrid,+Spain&t=m&ll=40.416633,-3.703766&spn=0.23525,1.373291&z=11&iwloc=A&output=embed"></iframe>
As for option (2) and (3), I see people are going with other options but I didn’t quite catch it…
On a theme I bought previously, in the contact, you have a fulll width map http://themeforest.net/item/coworker-responsive-multipurpose-template/full_screen_preview/3981356. It works with on a template page basis (not slider); it doesn’t resize dynamically but the pin on the map is always in the center, whatever the screen size.
Will you include soon a similar feature? Or is there a way to force pin to the center of the screen?
Thank you in advance!
Anne-Sophie
August 17, 2013 at 9:44 pm #135565Hi,
In order for us to help you, please include a URL to the particular page where you are experiencing this problem. Since each page can be created in a number of different ways , and due to many updates, it is simply not possible to provide you with a meaningful solution without first seeing the page with the live code. A screen capture will not help. What you can do is hide the url to your site by using the http://www.goo.gl url shortner.
Thanks,
Nick
September 5, 2013 at 12:58 pm #135566Hello Nick,
I updated everything and now map appears centered on loading, whatever is the page size. However, there is still a problem: on a tablet or mobile device, the map occupies everything, big as on screen so you don’t see what there is inside and don’t let you go down to see the rest of the content. The map I’m using is https://mapsengine.google.com/map/viewer?mid=zqjb8f_-IVc8.klDEB4_pP8xw but on an iPhone screen, you only the top left border.
The website is currently under construction but I can provide you a subscriber access by mail if you wish.
Thank you,
Anne-Sophie
September 6, 2013 at 9:14 am #135567In wp-contentthemesenfoldframeworkphpclass-framework-widgets.php replace
var myOptions = {
zoom:".$zoom.",
mapTypeControl:true,
mapTypeId:google.maps.MapTypeId.".$type.",
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl:true,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL},
center:latlng
};with
var myOptions = {
zoom:".$zoom.",
mapTypeControl:true,
mapTypeId:google.maps.MapTypeId.".$type.",
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl:true,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL},
center:latlng,
draggable: false
};this code mod will deactivate the google map scroll function and the user interaction (touch/input event) will affect the website and not the map area.
-
AuthorPosts
- The topic ‘Full width Google Maps’ is closed to new replies.