Hi there
Sorry we overlooked this, please enqueue your script with the dependency wpgmza.
You can listen for the event idle.wpgmza on the maps element (.wpgmza_map[data-map-id='123']) if you need to wait until the map is fully initialized.
I hope that helps?
Kind regards
– Perry
Hey Perry,
I was able to enqueue the script with the dependency.
But I wasn’t able to create a map the way you suggested.
var map = WPGMZA.Map.createInstance( document.getElementById("wpgmza_map_<id>") );
I get the following error message:
Uncaught Error: Map ID must be an integer
at WPGMZA.GoogleProMap.WPGMZA.Map [as constructor]
Do you have any suggestions?
Hi there
Begging your pardon, you need to add a data-map-id attribute to the element in question, for example:
<div data-map-id="1"></div>
May I ask what you’re trying to achieve?
I’m thinking we could potentially remove the need for that attribute if your map doesn’t need to interact with the database.
Kind regards
– Perry
When I create a map using shortcode in php, how can I get a reference to the map object in Javascript?
A further issue:
I added the data-map-id attribute to the div element and tried it again. I was able to add a couple of markers to the new map with JavaScript.
During testing I had also another map using the shortcode echo do_shortcode('[wpgmza id="1"]'); displayed on the page.
As soon as I remove the map using the shortcode, my JavaScript file is not loading anymore at all.
Do you have any ideas/suggestions for this problem?
-
This reply was modified 7 years, 7 months ago by
weekendize.
Hi there
Multiple instances of the same map are not supported by our plugin at present – have you tried using a different ID for your first map?
I believe that should work even if the ID isn’t valid.
We will remove this restriction in an upcoming release.
Kind regards
– Perry
At first, I register my JS-Script:
wp_register_script(‘wpgooglemaps_scripts’, get_stylesheet_directory_uri().’/js/wpgooglemaps.js’, array(‘wpgmza’),’1.0′, true);
Next, I create the following div:
echo '<div id="wpgmza_map_100" data-maps-engine="google-maps" data-map-id="100" style="display: block; overflow: hidden; width: 100%; height: 400px; float: left; position: relative;"></div>';
Than I enqueue my script that adds two markers to the map.
wp_enqueue_script(‘wpgooglemaps_scripts’);
The issue is that the script is only working when I create a map with shortcodes before, e.g. with: echo do_shortcode('[wpgmza id="1"]');
Do you have any idea why I have to create a map with short code in order to load my JS script?
Whenever I remove the wpgmza dependency, the script is working.
Thanks in advance.
-
This reply was modified 7 years, 7 months ago by weekendize.
Hi there
Yes, this is because the script with handle wpgmza is not enqueued if you don’t use a shortcode.
We do this for performance and bandwidth reasons – the scripts are only loaded when needed.
If you want to load them without using do_shortcode, you can do so in PHP using our ScriptLoader module:
$scriptLoader = new WPGMZA\ScriptLoader();
$scriptLoader->enqueueScripts();
This will remove the need to use a shortcode, and will ensure our modules are loaded ready for your code to use.
I hope that helps!
Kind regards
– Perry
Thanks, that worked perfectly.
One more question, how can I set the following map parameters in JavaScript?
map_start_lat, map_start_lng, map_start_location, map_start_zoom
You can change the map center at load time like this:
var callback = function(event)
{
event.map.setCenter({lat: 52, lng: -2});
event.map.setZoom(12);
$(document.body).off("idle.wpgmza", callback);
}
$(document.body).on("idle.wpgmza", callback);
Or if you alter the elements data-map-settings attributes before the ready event fires for our map, you can alter the settings there.
Kind regards
– Perry
I put your code snippet in my js file after I created the instance of the map. But then I get the following error:
Uncaught TypeError: Cannot read property 'setCenter' of undefined
Where do I have to put the code? event.map is not defined.
Thanks.
I beg your pardon, that’s an oversight on my behalf.
Would it be possible for you to link us to the page?
Unfortunately the page is not online yet, but we will put the website online soon.
Do you have any suggestions what I could try?
How can I alter the elements attributes from data-map-settings?
Hi there
My apologies for the delay in responding, we only have minimal support staff on over the weekends.
It’s probably going to be easier to use JavaScript rather than altering that attribute as you’d have to parse the HTML, or use string replacement on the HTML string which isn’t ideal. If you want to go down that route you can use the wpgooglemaps_filter_map_div_output hook.
Could you perhaps try this JavaScript?
var callback = function(event)
{
event.target.wpgmzaMap.setCenter({lat: 52, lng: -2});
event.target.wpgmzaMap.setZoom(12);
$(document.body).off("idle.wpgmza", callback);
}
$(document.body).on("idle.wpgmza", callback);
Thanks, the code snippet worked perfectly.
I’m glad to hear it!
If you need anything else please let us know 🙂
