is it possible to initialise a google map and then load the pins dynamically on it?
What I would like is a map where....as soon as the data is available, its marker pops up.
I am on a situation where the data come quite slowely so...it would me nice to give a feedback showing this partial results while the rest of the data come.
Thanks in advance.
is it possible to initialise a google map and then load the pins dynamically on it? Yes, use AJAX to load the markers (note, that link is to a page from Mike Williams' v2 tutorial, that API is deprecated, but the same concepts apply to the current v3 API).
Related
Backgroud:
I am using polymer framework to create a map service web app. And my map element is put inside iron-pages.
<iron-pages attr-for-selected="id" selected="{{data.page}}">
<main-page id="main"></main-page>
<test-page id="page"></test-page>
</iron-pages>
And the map element is inside the <main-page id="main"></main-page>
All the map settings are right , but the map is displaying like this:
enter image description here
Issue:
Just like the image above , the leaflet map is not fully loaded. However, when I resize the browser window, then the map loaded perfectly. It seems like the trigger to load the map became my resizing action?
My trials:
I tried to search others answer , https://github.com/Leaflet/Leaflet/issues/694
But when I execute map.invalidateSize() , the console says "invalidateSize() is not a function".
I tried to put <main-page id="main"></main-page> out of <iron-pages> which forsake routing feature temporarily for testing, and the map works perfectly.But What is the real issue in this circumstance?
I am very new to polymer, I am not sure where is the issue come from?
Could you please give me any suggestion?
Thank you!
I'm using Google map in my website to show marker and to draw marker I also use an extra JS markerwithlabel.js.
To initialize map what have I done
google.maps.event.addDomListener(window, 'load', mapInitFunction);
it working fine when I don't use third party resources.
For my business purpose I have to load some third party JS, images etc, sometimes one of these resources get loading. Because request status show pending. Consequently Google map not load. Since I have initialize map in window load. I read Google Doc but didn't get any
alternative way to initialize Google map without window load.
Any of your suggestion will be appreciated.
Use callback function method and put it at the end of body
<script src="https://maps.googleapis.com/maps/api/js?key=**YOUR_KEY**&callback=mapInitFunction" async defer></script>
You can use without async defer attributes as well. It just provides a way of lazy loading the google maps
I want to embed a custom (shared) google map i've created with specific markers into my website using the Google map api and javascript. The public link to the map: https://www.google.com/maps/d/edit?mid=zsBifQnz-5Kg.kzYonBq-f6oo&usp=sharing
I know that it is possible with iframe. But I need to add some links later on with js to the markers as well.
If its not possible, is there any way to get all the geo location data lat, and long from my custom map to dinamycally create my map?
You could do this with the google-maps javascript API and directly use the KMZ or KML that you create off your custom map. Just go to the options in your custom map and click "Download KML". If you plan to continue to make changes to your map, I would suggest the network KMZ file. The maps-api has a library to use this KMZ directly only a map.
Is it possible to embed google map with custom markers to a website just by iframe? I have google map on my website with markers and everything is working with some functions in javascript. It's okay but now I want to enable some users to add same map with same markers to their website. I want to do it very easy and with less code possible. So I want to give code to users that they add to site and everything would work. Is it possible with just iframe tag? Or I must give users code in javascript too? Or is there another way? Thanks
You may use Mapsengine to create the map, they may easily be shared via iframe. But there is no option to apply custom script-code.
Another approach: use a script-file that contains the code used with the map and that also creates the map. The users may embed this script instead of an iframe, the sharing would be as simple as when you would use an iframe.
I have multiple google-maps on a single page.
Scenario:
Maps are working as expected when used alone on a page.
I am using 2 maps on the same page.
Working Case: :)
1st map uses Unstyled-Markers (Default markers)
2nd map uses Styled-Markers [ Refer : Styled Markers ]
Both maps shows the markers as expected.
Refer code at [ http://pastebin.com/ciphPXZc ]
Problem Case: :(
1st map uses Styled-Markers [ Refer : Styled Markers ]
2nd map uses Unstyled-Markers (Default markers)
1st map shows no markers at all
Refer code at [ http://pastebin.com/HyYhgsbm ]
I am not able to understand how are the maps affecting each other even when there is no clash of variable names.
Also, how can the order of maps affect it?
Please help, ask for more info if I missing something.
It's because of the way you are loading the API and the StyledMarker extension. Do both only once, and as early as possible (preferably in the <head> section).
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=true&language=en-us"></script>
<script src="/site_media/js/google_maps/StyledMarker.js"></script>
</head>
Don't include the scripts anywhere else.
In the first example, you load the API, then do that again and then the StyledMarker extension, and then you call map1() and map2(). But because the StyledMarker extension is loaded last, everything works.
In the second example, you load the API and the StyledMarker extension, then you load the API again, then you call map1() and attempt to use styled markers. However loading the API the second time may well have obliterated the StyledMarker extension.