Develop Reference

"Cachebusting" / Obtain latest KMZ from NWS with GMaps API and JS [duplicate]

[EDIT] it seems the problem comes from google maps which takes some time to update the KML link...I'm not sure, but in the end, it works...[/EDIT]
I embedded an existing public google map on this website : http://www.ridetheflavour.fr
Here is the link of the public map : https://maps.google.fr/maps/ms?msa=0&msid=211027213468691902621.0004c8616605648d245b2
As you can see, the markers of the website's embedded map don't match the public google map markers. It seems it's not a matter of browser cache...
Here is the javascript snippet i'm using (Google map API V3) :
var mapOptions = {
center: new google.maps.LatLng(24.797409,-5.449219),
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
overviewMapControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var georssLayer = new google.maps.KmlLayer('https://maps.google.fr/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=211027213468691902621.0004c8616605648d245b2');
georssLayer.setMap(map);
Any help would be greatly appreciated.

Google's servers cache the KML content for some period of time. To force the rendered KML to update, add a cache busting parameter to the URL. I usually use a function of the date/time if I need to do it programmatically, or if it is just a one time edit a manual ?a=0 and incrementing that as I make changes works.
Something like this (if you don't have any other query parameters in the URL):
var URL = filename+"?dummy="+(new Date()).getTime();

Or you can simplify it even further and use:
var URL = '[your kml url here]&ver=' + Date.now();
var georssLayer = new google.maps.KmlLayer(URL);

Injecting Javascript From Meteor Template

I'm pulling long, lat coords from my collection and I want to generate dynamic Google Map Markers onto the map in the page.
The data is populating fine in the source, but the markers fail to show on the page.
Is it possible to inject a javascript object into the <script></script> tags?
Javascript
Template.maps.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {zoom: 8, center: new google.maps.LatLng(33.658206, -111.962827)});
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
});
HTML
<template name="maps">
<div id="map-canvas"></div>
</template>

Don't mix html and js. Put all the javascript inside methods of relevant template.
Template.mapWrapper.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {...});
_.each(locations, function(location) {
marker = new google.maps.Marker({...});
});
});
You should also use classes or data parameters instead of element id, but most importantly, don't mix html and js.

Issue with Google Maps api and GeoXML3 trying to use containsLocation

I am trying to set up a system that loads a KMZ file and displays it using google maps and then tests if the user has clicked within the bounds of a polygon created by the KMZ. I have searched all through these forums and the web and haven't found a working solution.
I am having no problem loading and reading the KMZ file and the polygon is displaying perfectly on the map. But when I try to use the polygon data returned by geoXML3 to test if a location is within the bounds then I get a variety of errors depending on how I approach it.
I am loading the geoxml3.js files locally and the parser for the KMZ files, and as I say that works fine so I won't include all that.
The KMZ file is local to the server and reads fine.
This is what I have:
<script>
var zone;
var polzone;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 0, lng: 0}
});
zone = new geoXML3.parser({map: map});
zone.parse('test.kmz');
}
function testlimit(){
polzone = zone.docs[0].gpolygons[0];
console.log( google.maps.geometry.poly.containsLocation(new google.maps.LatLng("0", "0"), polzone));
}
</script>
As you can see I'm testing just with hard coded long and lattitude values and it's giving me the error "Uncaught TypeError: b.get is not a function".
The testlimit function is fired when a button is clicked.
I initially had more code but as it wasn't working, this is where I've ended up. Any help would be appreciated.

Alright, never mind then, Apparently the gpolygon variable is an array.
So it should be
polzone = zone.docs[0].gpolygons[0];
One of those days I should have stayed in bed I guess...

Show current user location in Google Maps (JavaScript)

I want to be able to show the current user location, and to automatically put a pin where the user is located. I need this in HTML/JavaScript, full code. Please help.

You've to use the Google API (JavaScript in this case) to show current location in maps. You've to import the library with:
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer>
And use the function initMap:
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: initLat, lng: initLon},
zoom: 6
});
When you obtain lat and lon from the navigation.geolocation, you've to update the map with map.setCenter(pos);, when pos is an array with lat and lon.
Here you've a full example.
Google official doc
I hope it helps :-)

Google Maps API: Get url for current view

I have a form where users can introduce google maps urls to specify the address of some stuff.
I've been thinking in showing a map through Google Map API v3, letting user move to desired location and through a button or something automatically get the url of the place and copy it to an input.
I've been able to display the map using the tutorial, but I haven't been able to find in the documentation how I could get the url...
I think you will not need it, but this is the simple code I'm using:
var latlng = new google.maps.LatLng(-34.397, 150.644);
var options = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map-box'), options );

I'd suggest using map.getCenter().toUrlValue() and map.getZoom() to obtain the centre and zoom state of the current map view. That information should let you build a URI that you can then use, bare in mind that you'll need to write some code to take the values off the URI and pass them to the map API.