map on web page with current location and marked location - javascript

I want the users of my webpage to be able to see an embedded google map with their location and a specified marked location.

You will want to look into the API # Google Maps Platform. This site has a working example of the user's location, I would think it should be pretty easy to add a marked location to this. https://developers.google.com/maps/documentation/javascript/geolocation

A comprehensive guide on retrieving the user's location in browser - including how to display the location within a Google Map and necessary fallback considerations.
https://www.w3schools.com/html/html5_geolocation.asp
Then there's the Google Maps Api embed tool that's well documented to allow you to easily change the map as needed.
https://developers.google.com/maps/documentation/embed/start

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.

Web site/app that tracks movement and maps it on Google map

I'm trying to build a website to track my run distance, (have this working) while also tracking the path I take (like google maps when getting directions).
I'm not worried about storing it in a database yet, but if this is required to get the movement to be tracked on a map then I will.
I've looked at Google and see they have asset tracking, also Runtastic (but this doesn't appear to have an API). Also checked pubnub (but it doesn't seem to map the track)
I'm wanting to do it with HTML5 so that it runs in a browser. Has anyone managed to get this working and could share a guide on how to do it? (spent hours looking)
OwnTracks might do the job as backend for storing and managing your recorded tracks.

Can google map javascript API and map tiles be cached?

I want to develop a mobile app with Google map javascript API, and it needs to support offline mode, so users can view map without internet connected.
So is it possible to cache google map javascript API(.js file) and map data?
If so, would you please give me some advice ?
Thank you in advance.
No caching or storage. You will not pre-fetch, cache, index, or store any Content to be used outside the Service, except that you may store limited amounts of Content solely for the purpose of improving the performance of your Maps API Implementation due to network latency (and not for the purpose of preventing Google from accurately tracking usage), and only if such storage:
Source: https://developers.google.com/maps/terms#section_10_5

Google maps API v3 - How are client loads detected?

I have a small and low key website what features Google Maps using the v3 Javascript API.
Not that I am expecting to get over 25,000 loads per day, but how does Google detect people loading the map on my site? My site uses the the following code http://maps.google.com/maps/api/js?sensor=false without any API key, and as it is rendered in the clients browser, how does Google relate it to my site?
Is the loads worked out through the http headers/referrers or are the loads based on how many times each client/IP loads the map?
In essence, the code for the map is rendered on my clients/users browsers and thus how do Google know how many people are using the map on my site?
Finally; although I have Google web master tools; is it worth creating & using a API key, or will it just make it possible for Google to track how many people are using the map on my site and thus apply the limit of 25,000?
The API sends a request to google which contains the URI of the page that contains the map(when you inspect the network-traffic inside the dev-tools you'll see a request to https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent ) . This request will be sended when a Maps-instance has been created successfully.
The benefit of using a key: google is able to contact you when there are issues(e.g. may send a notice when you have reached any limits and give you a chance to react/solve the issue before they restrict the API-access for your domain/account).

How can I get a static URL to a map image using the Google Static Maps API?

I'm making a Web-App (still in "Beta") which uses the Flickr API to get information for the photos of a particular Flickr user and generates IPB code to post any of his/her images.
While Flickr now gives you the IPB code to show the image and link back to the photo site directly on its site, my App also has the option of embeding the title, description, select EXIF data, location information, etc. into the post for the IPB forum.
I've most recently added the option to integrate a Google Maps image of the photo's geolocation data into the post by using the Google Static Maps API.
The problem is that the image URL I have is in the following form (including IPB [IMG] tags):
[IMG]http://maps.google.com/maps/api/staticmap?zoom=16&size=600x600&maptype=hybrid&markers=19.387687,-99.251732&sensor=false[/IMG]
Which shows this example image (In practice the image size is user selectable):
However, some IPB forums seem to not support dyamic image URLs which gives me a broken image, I'd like to replace the
[IMG]http://maps.google.com/maps/api/staticmap?zoom=16&size=600x600&maptype=hybrid&markers=19.387687,-99.251732&sensor=false[/IMG]
with something like
[IMG]http://maps.google.com/maps/api/staticmap/map0000001.png[/IMG]
which should be supported by all IPB forums. Thanks in advance for your help.
In case you're interested, the most recent "released" version of my Web-App can be found here: http://flickr.argote.mx/ (The changes I mention here are still on local development server).
There are two types of solution as far as I can see:
You create a proxy server to download the images from Google and serve it on nice URLs to the clients. The disadvantage is that you will have to handle a high traffic through your servers (I don't know much about your project you have to decide about performance)
You create a special BBCODE to handle your URLs and you can use that on any IPB forums
+1: You could create a serverside script with nice URLs to redirect to the Google URLs but the problem is you never know how the different browsers will handle it. I suppose they normally don't follow URLs for images inside pages.
+2: Ask Google to support nice URLs ;)
Hope that helps.
You should be able to use a URL shortener service, as long as the service supports simple 301 redirects to image resources. You'd have to try out which ones do.
For example, bit.ly has a REST API. It allows you to make calls like this from within PHP:
http://api.bitly.com/v3/shorten?login=abc&apiKey=123&longUrl={myurl}&format=json
returning a bit.ly URL that you can use in BBCode.
Edit: According to this JSFiddle, this method works, at least in Chrome and IE8. It would still need scrupulous testing across browsers.
Since both Aston's suggestions are out of the question, maybe you can set up a simple script that redirects the request to Google Maps images (instead of a proxy)?
So you can have something like http://my-simple-script.tld/lat,lng have that script redirect to the correct Google Maps static image URL.

Categories