-
Notifications
You must be signed in to change notification settings - Fork 144
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Multiple Maps - One loaded on page load, the rest via AJAX #102
Comments
Kept going at it myself and ended up getting it working. The issue wasn't only due to the double include of the Google Maps API, it was also due to the individual map script not being executed after the AJAX request and because the new map had the same ID as the existing one. To fix the double include of the Google Maps API, I removed the following line from the mapper.blade.php view -
I then included my own link to google maps as well as the markerclusterer.js file in my layout view. To fix the issue with the individual map script not being executed I had to first give each map canvas its own ID, which in turn ment I had to update the It's worth noting that even with all this, it still wouldn't work until I added brackets to the end of the function name in the last line of the script as well, these were missing?
My full modified mapper.blade.php file is shown below
I don't know if this is the best solution to this, but it worked for me. If there is a better or easier way please let me know. |
Hi there, It seems like you have found a solution yourself, but there may be an easier method to achieve this. I'll investigate this. One thing that may simply your solution is to keep the javascript include, however in your controller for the AJAX maps, you can simple add |
Hi, I thought there might be an easier way to stop the javascript includes, I will implement that solution instead. Thanks for your help, great work! |
The only other problem i can foresee with your solution is that the more times you load a map via AJAX, you may encounter a problem with the random number generation picking the same number again. You could also just overwrite the As for needing to add brackets to the initialize call, according to Google's documentation: https://developers.google.com/maps/documentation/javascript/events#DomEvents it accepts a string as a function name, or a function itself, so both should work equally. I'll look at implementing a method in the future I'll also look at the possibility of adding a method parameter of prefix, to the render methods to allow the above type behaviour you are doing natively. That way you could pass a prefix of |
Yeah I can see what you mean, I suppose widening the parameters of the rand function to something a bit more drastic could solve that. That is strange about the brackets not being required, of course the code worked for the initial map without the brackets so this is true. The only thing I can think of there is when the script tag is rendered to the page with AJAX, it mustn't pick up on the fact that it is a function and not a string? Dropping the brackets now still causes the error on my end? Could be an issue with the Google Maps API itself. I researched loading script elements with AJAX and realised that its more complicated than I thought it would be. A lot of people are suggesting running an eval() function on the AJAX data in order to run any functions in javascript elements loaded via AJAX, as simply adding them to the page doesn't trigger them for some reason. The features you suggested sound great, what I am doing probably isn't that common but I am sure someone else will benefit from that further down the line. |
Rather than generating a larger random number, perhaps something like:
I would try to avoid eval if you can, it opens you up to a world of pain! |
Much better solution thanks! Yeah I didn't have to use it as adding the brackets made it work anyway. But yes eval is a nightmare! |
Is there an available solution to this? I will really appreciate your response. |
Multiple marker options available in single map? @reymark-torres |
@reymark-torres, I've used before the code of @mckelveydigital. It will render the map via AJAX request. |
I am creating an application that shows a map on page load, which I have no issues with, however when I attempt to use AJAX to load in more content (including a map), I get a console error explaining that the Google Maps API has been included more than once.
In my view that is being returned by AJAX I am using {!! Mapper::render() !!}, and my controller for the AJAX request has Mapper::map($lat, $lng, ['zoom' => 15, 'center' => true, 'marker' => true]);
I think the issue is Mapper::render() outputs the Google Maps include each time it is used. Is there any way to just render the map to the page, without the Google Maps API script?
Many thanks in advance!
The text was updated successfully, but these errors were encountered: