leaflet map is not fully loaded when its in iron-page - javascript

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!

Related

I cant find the icon that is placed in maps

I have a website.
http://shipm8.ship2you.co/contactus
I have to change the icon that is appearing on the map, but I don't know where that icon is located.Can anybody help?
view-source->main.js->http://shipm8.ship2you.co/images/marke‌​r.png
When you check page source (right click-> view source), you should find image URL there. If you can's see it, itis most likely it is served by JS from some file. My assumption was to check custom (not known library seen there) file and first one to check was main.js file. In that file you would search for block of code that is responsible for google map. Actually first logic thinking for you should be to check google map code - where is called, calculated, executed... So there you can follow URL for marker. I noticed it is relative URL and just being appended to base url it showed image as well.

Load markers dynamically while the page is loading

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).

Google Earth: Disable flyToView on runtime

I'm currently making an application where I use google earth to display a path. This path will be updated on a regular basis, and I've used a network link to connect the google earth to a KML file.
The problem is that every time google earth recieves an update from the KML it resets the view. I would like to disable this feature, but still be able to "fly" to a specific location on startup.
I've tried using setFlyToView(false) on the network link, but this results in no flying at all. What I would like, is for google earth to fly to the location of the placemark at start, and then when it updates -from the KML file through the network link- it doesn't fly anywhere.
Is there a way to access and change options when google earth is already running? If it's possible I could then use the setFlyToView(true) at initialization and then setFlyToView(false) when google earth has already changed the view to where I want to be, thereby disabling the updating of the view, but not the initial view position.
Thanks in advance!
That is the behavior if you have flyToView set 1 in the NetworkLink. Check that the flyToView element is child of the NetworkLink not the Link. Possibly the KML being generated by the JavaScript API you're using is not setting the flyToView correctly or it isn't supported.
<Document>
<visibility>1</visibility>
<NetworkLink>
<name>NE US Radar</name>
<refreshVisibility>1</refreshVisibility>
<flyToView>1</flyToView>
<Link>...</Link>
</NetworkLink>
</Document>
Also, you may want to override default view with a LookAt or Camera element added to the NetworkLink to fly.

How to show google map when user hovers over static image in html document

I would like to know to show a google map in a lightbox when a user clicks on an image. For Example:-
<img src="map_icon.png" alt="hover over image to show corresponding map" onclick="run_map_function();" />
I would really like to know how to do this. Any help will be much appreciated! Thankyou.
I am not quite sure if it possible to use a lightbox plugin, but try the JqueryUi dialog instead, it's easy to use and can be set in seconds
Take a look at my fiddle
http://jsfiddle.net/theodore/trnZS/49/
Does the map need to be interactive? if not, you should look at using the static maps api:
https://developers.google.com/maps/documentation/staticmaps/
Basically, you can use the static maps api to generate an image of the location you want to view, like here: http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false
If you need an interactive map, then I suggest using an iFrame (which would mean creating a separate page for the map). You should easily be able to show an iframe from your lightbox.

Google Maps V3 : Multiple maps on a page resulting in missing markers (DEBUG)?

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.

Categories

Resources