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
Related
I am a complete noob when it gets to building webpages but I am willing to learn.
I obtained a template website (Urbanic Template -
http://www.templatemo.com/tm-395-urbanic) and am trying to make (In Dreamweaver CS6) Google maps work.
I did all the usuall (registered,opened the account..) and obtained the key to put in my webpage but dont know where and how.
In my templatemo_script.js I can see the reference to the default cordinates of the map.
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(16.8451789,96.1439764)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); }
So where and how am I exactly to put in the obtained Google Key so my site functions as it should ? Coordinates I will change ofcourse.
You need to insert it where you are loading the library. As user Phil pointed out, the documentation shows that it should be included in the script tag when loading the google maps library.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
If you aren't sure where this is, you may want to consider starting back at the basics of web development, just so you can get a solid understanding of the structure of a webpage.
But for starters, you might try looking in the index.html.
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!
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).
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.
Where in the flow of execution does the initialize() function need to appear in the code to allow a Google Map v3 API map to be loaded through a JQuery .load() call.
The code I have at the moment looks like this
$('#maplink').click(function(){
$('.fades').fadeOut('slow');
$('#googleMap').show();
$('#googleMap').load("map.html");
initialize();
});`
However, this isn't initializing the map after the AJAX call.
Any help would be appreciated :)
This is a very old question, but for anyone who ends up here, loading a .html page into a div is not the right way to dynamically load a Maps API map. Here's how it should be done:
First, put all of your Maps API script in the host page - the page that has the #googleMap div. Or, if you want that script itself in a file that you load asynchronously, put it in a .js file and load it with $.getScript().
Then, if you want to load both the Maps API and the map asynchronously in response to your button click, use the code from this asynchronous Maps API example.
In that example page, you won't be using this line:
window.onload = loadScript;
Instead, you'll call the loadScript() function from your click handler:
$('#maplink').click(function(){
$('.fades').fadeOut('slow');
$('#googleMap').show();
loadScript();
});
where loadScript() is the Maps API loading function from the example.
In fact, you could use $.getScript() to load the Maps API - just give it the URL used in the loadScript() sample function. That loadScript() function is pretty much equivalent to $.getScript() except for the hard coded URL.
You'll also need to change things in the initialize() function in that example to match your page, of course.
I'm not very good with jQuery, but I'm not really sure why you want jQuery to load the map. If you are trying to make the map load asynchronously google provides a way https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API Other than that. I can't be much help. Sorry
The initialize() call to google maps can be added as a script inside map.html and then when jquery includes the html it will execute the javascript.
Alternatively, you could do the following
$('#googleMap').load("map.html",function(){
alert('map is loaded and ready');
});
The issue that you are having is that the load call is asynchronous and therefore, when initialize() is called your ajax load probably has not completed.