My realtime map doesn't autorefresh - javascript

I need help with a code from my work, it is a map (google,maps) with a kml, it is updated every 4 minutes time to the script extract the information to the bd, my problem is with the map. It doesn't refresh.
the map is here: 190.216.202.35/control/patios.html
and the kml is here: 190.216.202.35/control/refresh.kml
the map call a kml
all the code is correct but the page dont refresh the points not move until y "F5" the page
sorry for my English but I really need help
I have this but Is Not Enough
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlLayerOptions = {map:map, preserveViewport:true}; //map:display kml layer on created map object called "map"; preserveViewport: preserve maps options
var kml = new google.maps.KmlLayer("http://190.216.202.35/control/refresh.kml?dummy="+(new Date()).getTime(), kmlLayerOptions);}
google.maps.event.addDomListener(window, 'load', initialize);

var refreshMilliseconds = 3000;
var options = {
frequency : refreshMilliseconds,
enableHighAccuracy : true
};
try to implement the code code in function watchUserLocation(),i am trying to upadte for every 3 sec

Related

"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);

Google maps api weather layer and geolocating

I'm currently trying to use google maps to first display a map of United States with the weather and cloud google map layers and then zoom into the user's location using geolocation google maps api. My problem right now is I am only able to display the map without any of the weather, cloud, or geolocation information and only using the iframe basic view mode maps api. I am fairly new to javascript but have a div with an id "map-canvas" in my body tags and a javascript file mapWeather.js in my head tags.
mapWeather.js:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.6,-95.665)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
You probably already know, but do note that this library has been deprecated and will stop working in June.

Some Google Map features not appearing when used in Blogger

I am trying to add a Google Map on a blog (using Blogger). The script retrieves each post in the blog using the Blogger API and get its location (Lat/Lng). It creates a map that shows a polyline connecting all these places. It also shows a marker at the last place visited and center the map there as well (here, it should be Buenos Aires).
I wrote a little html/javascript piece of code to do that and it works fine in a browser (First image below). However, when I try to include the html code on the blogger page/post, some features of the map are not there anymore (Second image below).
It is very strange because the path (Polyline) is correctly shown but not the marker. In addition, the properties of the map are not taken into account (ie: center position, satellite view). However, when I move the map around, the correct map appears for a fraction of a second from time to time!
Here is the link to the blog where I am testing this:
http://testblogapinico.blogspot.ch/p/map.html
And the actual code that produces the first map (I simply copy/pasted this in the blog post to get the second map):
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<div id="googleMap" style="width:600px;height:900px;"></div>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var Lat = new Array();
var Lng = new Array();
var Place = new Array();
// Get latitude/longitude from Blogger
function handleResponse(response) {
for(i=0; i< response.items.length; i++){
Lat.push(response.items[i].location.lat);
Lng.push(response.items[i].location.lng);
Place.push(response.items[i].location.name);
}
}
// Create the map based on locations retrieved from Blogger
function initialize(){
// Get all latitude and longitude
var pos = new Array();
// Get the path
for(var i=0; i<Lat.length; i++){
pos[i]=new google.maps.LatLng(Lat[i],Lng[i]);
}
// Get the last position
var lastpos=new google.maps.LatLng(Lat[0],Lng[0]);
// Create the map
var mapProp = {
center:lastpos,
zoom:4,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
// Create the marker of last position
var marker=new google.maps.Marker({
position:lastpos,
});
marker.setMap(map);
// Create the path
var flightPath = new google.maps.Polyline({
path:pos,
strokeColor:"#EE0000",
strokeOpacity:0.6,
strokeWeight:7
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script
src="https://www.googleapis.com/blogger/v3/blogs/884353949349844556/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
</script>
</body>
</html>
Anybody knows what the problem could be?
Thank you in advance for your help!!!
Cheers,
Nicolas
I looked at your page, and it looked like you have two maps, one on top of the other.
Looking at the source, you do indeed have two javascripts that initialize maps.
Interestingly, they're both named "initialize" - not sure why you don't just get an error on that.
I'm guessing that if you remove the extra javascript, it will work properly.

Google Maps: showing a local image for a marker

How do I show a local image for a GMarker? I am using v2. Code sample
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = '/Images/marker/mr.png';
markerOptions = { icon: blueIcon };
map.setCenter(point, 3);
var marker = new GMarker(point, markerOptions);
Its not working...
What's local to the map page is the Google Maps site itself, so if you want to use an image from your site, you have to provide the full URL for it.
If you haven't seen the v2 docs, here is a link:
http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html#Custom_Icons
Also, are you actually adding it to the map, or have you omitted that from your code?
Here is a full example:
http://code.google.com/apis/maps/documentation/javascript/v2/examples/icon-simple.html

Google Maps GDirections - Route directions between two points on a map

Does this look like it should work? I'm wanting to generate directions from one latitude/longitude to another latitude/longitude.
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(35.742149,139.337218);
wp[1] = new GLatLng(35.735347,139.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.load("from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267");
The map loads fine, but the directions don't come in. I've tried it this way too:
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(32.742149,119.337218);
wp[1] = new GLatLng(32.735347,119.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.loadFromWaypoints(wp);
Same thing... map but no directions. Any help is greatly appreciated, thank you in advance!
I can't see anything obvious at first glance at your code, so my first guess is a failure coming back in for the GDirections request (I am also assuming you have checked the javascript error log for any errors, Tools/Error Console if you haven't already done this).
I suggest you add an error handler for your GDirections object, this will give you some indication what is happening with your request:
GEvent.addListener(directions, "error", handleErrors);
and in the handleErrors callback have a look in:
directions.getStatus().code
Compare with the Geo Status Codes.
EDIT: Ok, I just tried out your code here and it works perfectly. I can only assume that there is some other problem on your page that is causing the issue. Can you post a link in the question so we can check it out ?
Checking the status (604) I got when I tried in the Google Maps API Reference says:
The GDirections object could not
compute directions between the points
mentioned in the query. This is
usually because there is no route
available between the two points, or
because we do not have data for
routing in that region.
and this is the code I used (slightly modified):
$(function ()
{
if (GBrowserIsCompatible())
{
var wp = [new GLatLng(35.742149,139.337218), new GLatLng(35.735347,139.328485)];
var map = new GMap2(document.getElementById('map-canvas'));
map.setCenter(wp[0], 12);
map.setUIToDefault();
var marker = new GMarker(wp[1]);
map.addOverlay(marker);
var directions = new GDirections(map);
GEvent.addListener(
directions,
'error',
function ()
{
console.log(directions.getStatus().code);
}
);
directions.load('from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267');
}
});

Categories

Resources