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.
Related
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 am desperatly trying to put online a map I created through a Javascript code on a html page (I'm not a professional developper, and I am particulary ignorant in javascript). As long as I keep the html file local, everything runs ok, but as soon as I put it online, the map won't show, and I got a message concerning the missing key.
So I got a key, but my problem is to find how it works. My map is generated by the following instruction :
map = new google.maps.Map(document.getElementById("map"), options);
I tried to add this script :
script src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" async defer
But all that happens is several more errors, and no map visible.
Could anyone help me ? Thanks in advance
Instead, you should use an iframe that you get on the google maps site. Example:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100994.00356082054!2d-121.9805740058651!3d37.71820818113972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fe65cd6892231%3A0x3b327c848ef64057!2sDublin%2C+CA+94568!5e0!3m2!1sen!2sus!4v1480970198759" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Go to credentials page in google developer console then at the top you will see Domain Verification tab click on that tab, then click on the button Add domain in order to add the domain from where your site is being loaded.
If you do this you will not need API key. Thanks to this Google can track your requests.
Important Note
I'm not sure whether this will be the case for you but please note that once you will add a verified domain make sure that the previously generated your key is not being used for the Google Map's web services like APIs otherwise that APIs will return error after adding domain.
I am trying to set the Google Map overlay from an image created at the browser instead of giving a URL. Is it possible?
Below is the example giving on one of the google help documents. As you can see they set the second parameter to the URL. I would like to use an image from memory rather than the URL. I have seen where when doing Android development that is possible with the GroundOverlayOption.image but I don't see that as an option using the JS V3 API.
Any suggestions?
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
historicalOverlay = new google.maps.GroundOverlay(**'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'**, imageBounds);
historicalOverlay.setMap(map);
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.