Google Maps is using javascript to render image or image files? - javascript

To use Google Maps API you fetch their api js file with:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
Then I use javascript on my page to interact with this API.
I wonder what is going on in the background that I don't see.
Is this file using javascript to render the Google map or is it fetching jpeg files when I zoom in and out?

Id suggest installing Firebug, a plugin for Firefox, that will let you see exactly what is going on that you don't see (click the 'Net' tab).
In short though, yes, Google Maps API uses javascript both to render the map and fetch jpeg files when you zoom in and out.

Related

Passing KML files to Google Maps

I just became aware of KML files, did some reading and generated my first KML files off of google maps. In my app I am linking to google maps, passing a publicly available file with the intent of opening the KML file on the users Google Maps or Chrome browser (not within my app). Maps, or Google opens, but the kml file data/map isn't loading. To confirm its public, the URL attempts to download the file from my website.
Doing a simple call like:
window.open("https://maps.google.com/maps?q=https://myserver.com/files/maps/testMap.kml")
Maps successfully opens, but I get a "No Results Found" pop up. I do see my URL passed into the query section of the map - and the zoom is in the middle of the ocean off of Africa...and when I zoom to the map location (Tampa FL) nothing is there.
What am I missing here?
Google Maps no longer supports opening a KML file directly on the main page at maps.google.com. You used to be able to enter the URL for a public KML file right in the Google Maps search bar and have it load directly, or load the KML via a URL parameter like you have in your question (?q=http...), but that functionality was turned off some time ago.
Now, to load a KML file on a Google Map, you'll probably need to set up a web page with a Google Maps API instance on it, where you can use the API to load a KML file. If it's a relatively simple KML, you could also try uploading it to a Google My Map, and using the share functionality in there to share a link or get an embed code.

Same kml file on two different servers - one loads in google maps v3 api and the other doesn't. Why?

I am migrating a website to a different server/domain name. There is a custom map application that uses Google Maps Javascript API v3. The kml file that it loads works fine on the old server, but not on the new server. To remove all the variables in my own code, i tried it with Google's JS Fiddle of their demo app here:
https://developers.google.com/maps/documentation/javascript/kml#try-it-yourself
swapping out the url to the kml file, i first use the old path:
http://nhlt.org/webmap/webmap.xml
it works. Then I put in the new url. The webmap.xml file is exactly the same.
http://groundsw.w17.wh-2.com/webmap/webmap.xml
no data is displayed.
Both of those links are publicly accessible if you just paste them into a browser.
Anyone have any clue what I'm missing?
UPDATE:
This is a screenshot of the results from #geocodezip 's fiddle:

Where is the google maps API loaded?

I have a magento website that is loading a google maps container. The weird thing is that the console is giving me a warning that says
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
maps.google.com/maps-api-v3/api/js/29/2/util.js:220
but the map is still loading. How is it possible?
I'm asking because I want to load google maps on another page in the same website but I seem not to do it. It is still giving me the same error.
So I'm wandering where is this util.js file is loaded exactly on the website? If I find it I can provide it with the key and maybe load it on the website.
I have used google map functionality in magento.
I have loaded MAP in .PHTML file using below API & My KEY.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<?php echo $this->getGoogleApiKey(); ?>&libraries=places&callback=init">
API Key : This Key you will find from your google account. For find key click on below link and login with your gmail credentails.
For Reference Please visit below links it will help you.
- https://developers.google.com/maps/documentation/javascript/tutorial
May be Above things will help you.!

Loading google maps api with libraries

I'm trying to load both the main api and a library (Places) into my web application. According to the documentation, I'm supposed to load the Places library with:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
But when I use this in combination with my script tag to load the main api, it gives me an error that I'm loading the api twice. How could I load both in the same script tag?
Since you've specified the places in the libraries param, you only need that one script. According to the docs:
The JavaScript code for the Maps API is loaded via a bootstrap URL of the
form http://maps.googleapis.com/maps/api/js.
This bootstrap request loads all of the main Javascript objects and symbols
for use in the Maps API. Some Maps API features are also available in
self-contained libraries which are not loaded unless you specifically
request them.

google maps and scopes within greasemonkey

I am writing a greasemonkey script that will allow its users to click a button and view a popup map. I am going to try and use google maps for actually creating the map and plotting a few points. I have a couple of questions about this however.
First, would using script to create an iframe within my popup div that calls a script from my server have to use an api key for my server, or would it have to be a key for the site the greasemonkey script will run on?
Secondly, if this fails is there a way to use JS to plot points on an image like image magick does for PHP?
If you use Google Maps Javascript API V3 you don't need API keys anymore.
To generate images with javascript, you could use the new <canvas> element: https://developer.mozilla.org/en/canvas_tutorial

Categories