Google Maps: showing a local image for a marker - javascript

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

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

My realtime map doesn't autorefresh

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

How to set a Custom Icon on clustered Push Pins in Bing Maps?

What I'm trying to do is to change the default icon that is displayed when you set the Clustering Configuration for a Bing Map using the Bing Maps Ajax Control 6.3.
I have a function that loads a Bing Map like this:
function getMap() {
map = new VEMap('map_canvas');
map.SetDashboardSize(VEDashboardSize.Tiny);
var latLong = new VELatLong(21.983801, -101.557617);
map.LoadMap();
var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
icon.CustomHTML = custom;
var options = new VEClusteringOptions(icon, null);
map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
map.SetCenterAndZoom(latLong, 6);
map.SetMouseWheelZoomToCenter(false);
map.EnableShapeDisplayThreshold(true);
map.AttachEvent("onclick", singleMouseHandler);
map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}
But so far it keeps displaying the same default icon. What am I missing here?
Another thing I was wondering is if there's a way to change the custom icon if a pin in the cluster changes, like if I have 5 green Push Pins but one of them is updated to be a blue Push Pin, is there a way to change the icon that represents that cluster?
I found the reason my approach wasn't working, I keep thinking I'm dealing with classes with constructors that receive parameters, which in this case the VEClusteringOptions class doesn't receive parameters in its constructor. I had to set the Icon property separately:
function getMap() {
map = new VEMap('map_canvas');
map.SetDashboardSize(VEDashboardSize.Tiny);
var latLong = new VELatLong(21.983801, -101.557617);
map.LoadMap();
var customPin = '<div style="position:relative; left:-10px;top:-20px;"><img src="../Content/images/icons/pin1.png" style="width:40px; height:40px"></div>';
icon.CustomHTML = custom;
var options = new VEClusteringOptions();
options.Icon = icon; // here's the "big" difference
map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid, options);
map.SetCenterAndZoom(latLong, 6);
map.SetMouseWheelZoomToCenter(false);
map.EnableShapeDisplayThreshold(true);
map.AttachEvent("onclick", singleMouseHandler);
map.AttachEvent("ondoubleclick", doubleClickMouseHandler);
}
Now my custom cluster icons are being loaded great, I need to get used to more to the concept of property in the future.
I did the development long time ago for our company site. Did you try the interactive SDK available here?
http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins15
I have added the reference for pushpin development
http://www.microsoft.com/maps/developers/web.aspx

How to bound tile layers in Bing Maps AJAX Control, Version 7.0

I have been attempting to overlay tiles from Weather Central onto a Bing map but have been encountering a problem. I am able to call upon a tile and push it onto the map, however, no matter how big the tile is, it puts the tile everywhere on the map. I would like to be able bound it to a specific place but cannot figure out how in 7.0. In 6.3 the specifications seem straightforward : http://msdn.microsoft.com/en-us/library/bb429629.aspx but not in 7.0. They have an example here: http://www.bingmapsportal.com/isdk/ajaxv7#TileLayers1 but even using their code it will still put the tiles everywhere.
Here is my code so far:
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "my creds" });
var tileSource = new Microsoft.Maps.TileSource({ uriConstructor:
'http://datacloud.wxc.com/?type=tile&datatype=forecast&var=Temperature&time=now&bing=023212&vs=0.9&passkey=my_passkey', height: 256, width: 256});
var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: .7 });
// Push the tile layer to the map
map.entities.push(tilelayer);
}
Where I do the function GetMap() onload.
Thanks
It looks like you're hardcoding a particular tile quadkey (023212) in your request - you need to replace this with the {quadkey} placeholder to request the appropriate tile image for each location. i.e.:
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "my creds" });
var tileSource = new Microsoft.Maps.TileSource({ uriConstructor:
'http://datacloud.wxc.com/?type=tile&datatype=forecast&var=Temperature&time=now&bing={quadkey}&vs=0.9&passkey=my_passkey', height: 256, width: 256});
var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: .7 });
// Push the tile layer to the map
map.entities.push(tilelayer);
(untested, since I don't have a passkey to access the service in question)

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