How i can remember in older versions of Gmaps API was it possible, to make a custom Overlay for adding a Markers on it and than add or remove from main map. Also it was possible to make different groups of results and show/hide it in only one command. In the new reference i can not find it, did they have rename it?
You're talking about a GLayer - https://developers.google.com/maps/documentation/javascript/v2/reference#GLayer
It has, in fact, been removed from the v3 API.
In API v3, it's been left up to the developer to keep track of their overlays and add/remove them from the map as they wish.
The best way to do this is keep your overlays in an array (or an object) and loop through them.
For example, if you had two distinct sets of overlays (infoWindows and markers), you could do something like this:
var overlays = {
markers : [],
infoWindows : []
};
//create a marker and put it in markers
var marker = new google.maps.Marker();
overlays.markers.push(marker);
//create an infoWindow and put it in infoWindows
var infoWindow = new google.maps.InfoWindow();
overlays.infoWindows.push(infoWindow);
//remove all infoWindows from the map
for(var i=0;i<overlays.infoWindows.length;i++) {
overlays.infoWindows[i].setMap(null);
}
//remove all markers from the map
for(var i=0;i<overlays.markers.length;i++) {
overlays.markers[i].setMap(null);
}
It's a simplistic example, but hopefully you get the idea: that adding, managing, and removing "groups" of overlays in v3 is left up to the developer.
Related
i create da google map with multiple InfoWindow.
if i update infoWindow content, it's create new one.
so map always have new window
see image:map infoWindow screenshot
code:
update()
update(){
markers[i].infoWindow = contents;
infoWindow.setContent(markers[i].infoWindow);
infoWindow.open( map, markers[i] );
}
I use time and call update function.
allways it gives new infoWindow
please help
I was fiddling a bit with Here Maps and with some some of the examples Here Javascript API Explorer and Here Maps on GitHub.
I tried to see if there's already a way to just add a visual bearing attribute in addition to longitude and latitude and have something like a small tip appear to the marker. This feels like something that many would like to have, so just to check I haven't missed anything obvious...
Is there a way to add visual bearing information to markers?
If not, does anyone know if there's an example of using a custom marker to achieve this I just couldn't locate?
There is no bearing/heading control ready available within the API - you will have to create a custom map component of your own. The usual way of doing this would be to inject some HTML as a new DOM element within the map control.
Firstly define your custom HtmlControl as shown:
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
Then set up the map and add the custom component as shown:
htmlControl = new HtmlControl(
"<img id='compass' style='left:4em;top:1em;width:100px;height:100px' src='...'/>", "Compass");
map.components.add(htmlControl);
The source file for the <img> element will need to hold the compass image. This is most likely to be an image with due North pointing upwards since the map control is based on the Normalized Mercator projection
Alternatively look at using the Map Image API and investigate the ra parameter to rotate the map.
I have requirement of displaying an address on a click of a button, for which i got the latitude and longitude of the desired location,
while mapping in URl
https://maps.google.com/?ll=28.64036031970850,77.24250191970849
like this. I don't get the desire pointer on google map Like which we get A in red pointer.
Thanks for any assistance.
Try this. Change the lat/long as per your need.
https://maps.google.com/?q=22.917923,72.773438
You can use custom markers for this. Here is a snippet to get you started:
// Create the map
var map = new google.maps.Map($("#map-result"), mapOptions);
// Create the marker on the map
var marker = new CustomMarker(new google.maps.LatLng(pinLatitude, pinLongitude), map, searchResults[i], markerNumber);
// Add listener to react to click of marker
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
// Call some function to do something
showSelectedMarker();
}
})(marker, i));
A very good example is here:
Google Maps JS API v3 - Simple Multiple Marker Example
In my application using Google maps APIv3, I am trying to randomly generate some markers attached with a polyline. I have done the following:
//Loop to add locations and draw line
var path= polyline.getPath();
for(var i=0;i<route.length;i++) //route is an array containing some latlng's
{
var marker= new google.maps.Marker({position:route[i],map:map});
path.push(route[i]);
}
//Event Listener's
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
//iwindow is the InfoWindow variable
iwindow.open(map,marker);
});
The issue here is that the marker on click always has the marker reference of the last marker in the for loop. So only the final marker displays the infowindow.
How do I change my code so that every marker click generates an InfoWindow?
The callback is the same for each marker, so it's fine to define that outside the scope of the loop. But a separate listener needs to be attached to each marker, so put that code inside the loop.
function showPopup(event) {
iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
iwindow.open(map,marker);
});
for(var i=0;i<route.length;i++) {
var marker= new google.maps.Marker({position:route[i],map:map});
path.push(route[i]);
google.maps.event.addListener(marker,'click',showPopup);
}
How can I clear a Map of all custom overlays?
I do not want my markers removing, instead, I only want the custom shape overlays that I have created to be removed. (circles, polygons, ect)
upd:resolved
If you have a collection of the overlays you want to remove simply iterate over that collection calling setMap(null):
function RemoveOverlays() {
for (var i = 0; i < overlays.length; i++) {
overlays[i].setMap(null);
}
}