I have a google map which has multiple markers pulled from a custom post type.
They also have info windows containing information from each post, but when the page is loading the infowindows/markers appear before the map does.
Is there a way I can set it so that the markers/infowindows only show once the map has fully loaded? Or have a screen which is shown until it's loaded?
I've attached a couple of screen grabs to show what I mean
Any help would be much appreciated, thanks!
Thanks, sorry about that, I solved it by adding css display:none to my marker div, this stopped them from all loading down the page but they all still worked on load
Related
I'm creating a store loacator for a site using the Map List Pro plugin displaying inside a popup created using the Popup Maker plugin.
version in progress: https://beastsofbalance.com/pop-test-page/ - click the 'store locator' link to open it
When the pop-up is opened, the Google map doesn't load.
The documentation for the Map List Pro plugin suggests this is because it's initially hidden on page load: http://www.maplistpro.com/documentation/only-part-of-the-map-shows-the-rest-is-grey/
it gives two code snippets to solve the issue, but says the pop-up plugin will have a custom event I need to add this to.
The two snippets are:
google.maps.event.trigger(MapListProMaps[0].map, "resize"); - for an individual map
$(document).trigger({type: "resizeMap"}); - for all maps
The documentation for the Popup Maker plugin says the event pumAfterOpen runs just after the pop-up has opened:
http://docs.wppopupmaker.com/article/42-popup-maker-jquery-api
I don't have enough (any!) jQuery / javascript knowledge to put these two bits of information together to create a working code snippet which will trigger a reload of the map when the pop-up is opened, and I was very much hoping someone might be able to help me out!
Many thanks
Hannah
I've tried the following on a copy of your page:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on('pumAfterOpen',function(e){
jQuery(document).trigger({type: "resizeMap"});
});
});
I can't see the map resizing because of authorisation issues with the Google API, but it should be enough to get you on the right track.
I have a menu with several functionalities including Google Maps.
The application always works fine until i open the google maps page, and leave it to return to the menu:
the menu gets stuck and does not scroll anymore and i don't get any errors.
Any idea what may be causing this?
Thank you.
Can anyone give me a example on how to format this. I am not familiar with Jquery and what I have tried does not work. I don't have the rep to add to the thread and ask. Any help would be greatly appreciated. I have a iframe google map in tabs that are not loading correctly very similar to this problem;
From a post Google map position incorrect on load
"The problem is that the place you want the map to center on ends up in the top left corner of the iframe for some reason. I think it's because on google's side the map resize event is firing too early before it knows the full size of the iFrame.
Remove the iframe src tag.
Embed the below javascript code somewhere below the iframe:
jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");
Because it loads the map after the iframe is there. If I still have problems in the future I'll try adding a short delay to the above code, making it run after document load."
I developed a site in drupal and for the most part all of the pages in the site load just fine, except for one page which takes an average of 2.8 seconds to load. This is obviously not expectable but I was fairly new to drupal when that section of the site was developed.
The site is in testing and can be viewed now # xltrust.mayaco.com/properties
Right now it is loading everything into the dom. So all of the properties, information, images, and google map. Is there a way to only have what is needed for that page to load and then when one of the properties is clicked on then and only then would the properties images, map, etc load. Instead of everything loading when a user first goes to the page.
hey everyone who tried to answer this question.
i am the new developer that took this persons job. i have rewrote the entire page he was trying to fix. now everything works...his problem was loading 1000000000000+ photos / google maps on initial load. i stripped everything out and process it all on the fly with an ajax request. site speed ~ 2 seconds to load up. load a map ~3 seconds to fetch the map initially then it just shows the old on when clicked again.
EDIT::
ooh yeah i also remade the map functionality no more images on that. now it is a vector map recoded to work with my new functionality. i basically took the dev package of jqvmap.com
and hacked the sh!t out of it. binding in my function calls on click. yeah the other developer elodev. was a newbie. entry level very eager to learn to i hear. i just hope he checks this feed again. i'd like to let him know where he went wrong. not to gloat. but to teach.
I have used the Google Maps API to create a simple HTML page which I'm then embedding into an iFrame on another page.
Page works fine when outside of the iFrame however when within the iFrame, the window position doesn't scroll to center on the marker.
An example is here: http://webfe.omega.studiocoast.com.au/epping-club.aspx and click on club location.
On reading this I'm wondering why I'm using a iFrame and instead call the API directly from the parent page...
But any suggestions as to my first problem would be fantastic :)
After much searching I found the issue was related to the iFrame being embedded inside a jQuery accordion. It rendered correctly initially when the accordion was rolled up by however when it was rolled down, the map position was thrown out.
Managed to fix the marker location by creating a new event which fired out when the accordion rolled down which re-rendered the iFrame and map position.
Thats because you are embedding http://webfe.omega.studiocoast.com.au/media/Assets/Maps/EppingMap.html into an iframe that does not fit the whole screen (you are actually cutting the image and only showing the right corner of the map).. I would rather embed the map directly from google as you can copy the map in the exact size you want..
If you want to do it your way I would suggest you take a look at the javascript found when embedding directly from google..
Open this link in firefox and use firebug to analyze it.. then I guess you will find what you need.
http://maps.google.no/maps/empw?url=http:%2F%2Fmaps.google.no%2F%3Fie%3DUTF8%26ll%3D61.143235,9.09668%26spn%3D14.594437,39.506836%26z%3D5%26output%3Dembed&hl=no&gl=no