I was looking at http://here.com/ and noticed that their controls navigation panel has a zoombar.
I was wondering if this is a map setting or is it something that needs to be custom built.
Posting it here due to lack of a better suited forum.
A zoombar can be added to a map using the HERE Maps API for JavaScript as shown:
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
new nokia.maps.map.component.ZoomBar()
]
});
The zoombar looks like this:
The zoom control on here.com looks like this:
It is a custom map control and would need to be created with your own code using the UI library of your choice and creating a new class extending MapComponent.
An outline sketch of how to go about this can be found in the question here
I am developing a custom imagemap type map without geo referencing i.e. latlng of my map do not relate to acutal latlng of that place. Now i have also created custom streetview panoramas of certain buildings and places in that map.
The issue is am not able to integrate those custom streetview panoramas with my custom imagemap.
Following is the link to see whats going on:
http://cdi.astateweb.org/virtual_tour/
First Approach:
There are two markers on the map right now. When you click on them a small infobubble pops up. Now when you click on the virtual tour link a dialog comes up. I want to load the custom streetview panorama in that dialog. I tried several things but to no avail. I am trying to reuse the same dialog for both markers. I tried initializing the panorama in jquery ui dialog open function. It worked for the first one but when you close the dialog and open it again it fails with some cbk error from google apis.
SECOND APPROACH:
I tried to use the default streetview pegman such that when the pegman is dropped on a certain building or place which has a panorama the streetview comes up just like in normal google maps. This didn't work either.
Can somebody point me to the right direction. Any help will be highly appreciated.
Thanks
Ok, try like this:
Change at line 41
from
'Virtual Tour'
to
'Virtual Tour'
Change at line 96
$("#dialog").dialog({
autoOpen: false,
width: 650,
open: function() {
console.log($("#" + virtualTour.currentPano));
$("#" + virtualTour.currentPano).appendTo("#dialog").css("display", "block");
},
close: function() {
$("#" + virtualTour.currentPano).appendTo("body").css("display", "none");
}
});
And the below code to add into "createMarker" function.
//After this line.
virtualTour.hotspotArray.push(marker);
//Add this code.
setTimeout(function(){
document.getElementById(pano).style.display = "none";
}, 100);
I have a Google Map Version 3 that I can't quite get working as I want. When the map opens there are several markers on the page and clicking or hovering on the marker opens a little InfoBox with the name of the hotel. Clicking on another marker closes the first InfoBox and opens a new one on the new marker. The problem comes with closing the last InfoBox.
If I allow the closeBox in the options, the closeBox (little cross in a square) gets left on the screen when the rest of the InfoBox is closed. This only happens when the InfoBox closes because another one has been opened. As I can't find a solution to this, I intended to do away with the closeBox and let users click a blank area of map to get rid of the final InfoBox. However, at the moment, that doesn't work either.
The problem page can be seen at http://www.littlehotels-testdomain.co.uk/spain/abadia.php (click on "See a location map for this hotel" just to the right of the photo).
The bit of code which should make this work is:
google.maps.event.addListener(hotelmarker, 'mouseover', function() {
var ib = new InfoBox(ibOptions);
boxText.innerHTML = hotelname;
ib.open(map, hotelmarker);
});
google.maps.event.addListener(map, 'click', function() {
ib.close(map, hotelmarker);
});
Is there something in the second event listener that I am missing?
You need to make your ib (infoBox reference) global. Put it outside your Listener functions.
Andy's 47th rule of JavaScript programming: never use a global variable to accomplish something you can do with a single line using jQuery:
$(".infoBox").hide();
As of Google Maps API v3.6, maps now include "points of interest", which are gray markers embedded into a map. When the user clicks on this icon, an InfoWindow appears with information about that business (or park, hospital, etc.)
These can be turned off by setting the Styling. (See "Style Array Example")
https://code.google.com/apis/maps/documentation/javascript/styling.html
Once they are turned off, the icons, names, and shaded regions (for parks and hospitals) go away.
Before Google Maps API v3.6, there were no icons; only the names and regions.
The question: is there a way to remove the "click icon to open info window" behavior of these points of interest? I still want to keep the icons, names, and regions; only want to remove the click behavior.
Alternate question: is there a way to download/save the JavaScript of the v3.5 of Google Maps API to store on my server? At present, v3.5 is working fine for what I need. In February, Google will no longer provide v3.5 of the code and will instead provide only v3.6, v3.7, v3.8.
Retiring of minor versions of Google Maps API v3, and using the "frozen" version of an API:
https://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning
Things I've tried and considered: Adding an event listener when the map is clicked does not work, because the embedded markers are clicked instead of the map. Adding "clickable: false" as a property was a shot in the dark, with no result. Setting "visiblility: off" removes it all, leaving the map with less content. Setting "visibility: simplified" removes the name of the location, though the onclick behavior is still present. Putting an invisible DIV overlaying the map might work, though it would remove the ability to pan/zoom/drag the map without increasing complexity.
Setting a style so that featureType: poi, elementType: labels, visibility: off will result in showing the pink/gray/green regions for hospitals/cemeteries/parks, without the marker or name. It returns more color to the map.
I'm not sure if this is still relevant to you, but Google did, indeed, solve the issue on April, 2016, all you need to do is clickableIcons to false in MapOptions
This issue has been logged with google at:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866
Please star and comment your needs on this issue there.
I'm not sure this is not a violation of the Google Maps TOS, it's a bit hacky, and doesn't work on IE < 9, but you can listen on dom event,
to detect the creation of the window, using Mutation Observer
Here is a plunkr to demonstrate : http://plnkr.co/edit/pGep9OZFligLhRtHlhgk
You can check in the console, an event is fired (actually twice) when you click on a POI, and the window is hidden
By referencing this URL (https://stackoverflow.com/a/24234818/6160436), I somehow managed to hide the Info windows of POI and call the click event listener of map when the user clicks on the POI.
But I'm not sure whether this violates TOS or not, so use at your own risk.
//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;
//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function () {
//this property isn't documented, but as it seems
//it's only defined for InfoWindows opened on POI's
if (this.logAsInternal) {
if (this.getPosition()) {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
}
else{
google.maps.event.addListenerOnce(this, 'map_changed',function () {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
// var map = this.getMap();
// //the infoWindow will be opened, usually after a click on a POI
// if (map) {
//trigger the click
var removeInfoWindow = null;
removeInfoWindow = setInterval(function(){
if ($('.gm-style-iw').parent().length) {
$('.gm-style-iw').parent().hide();
clearInterval(removeInfoWindow);
};
},1);
// }
});
};
}
//call the original setPosition-method
fx.apply(this, arguments);
};
google.maps.event.addListener(map,'click',function(e){
alert('clicked #'+e.latLng.toString())
console.log('ok');
});
A couple of things to be aware of:
1)
If your map is high traffic, you may find yourself in violation of the Google Maps TOS. You're supposed to use an official version. If it's your own blog or something else low traffic, nobody will notice or care.
2)
This is only conjecture on my part, but I noticed these POI's myself and got annoyed by them. I am pretty sure these are paid-for "inline ads", so to speak. Some gas stations and diner chains have them, so you will soon see Google maps being spammed with these POI markers. If they allow those to be turned off in the API, it kind of goes against the business interests of those who paid for the POI icon... so I highly doubt that you will be able to remove them.
If you do find a way,please please DO POST the solution! Thanks.
Based on a selected country and date a list of results will show up on the map. The placements of markers with html data in them works fine, the problem I have is handling the cases with duplicate markers.
I found a way to check for duplicate ones, but I would like to be able to modify the content in the infowindow of the one already present. So that I can add the content of the duplicate marker to the existing marker that stands in the same location.
The problem I'm having is that I can't find the right way to access the data in the existing infowindow for the duplicate one.
If I do alert(infoWindow.getContent());, then I just get "undefined". I also tried markers[i].getContent(), but that also didn't do anything.
Any idea's, or suggestion on how I can access the infowindows of previously added markers, get their content with getContent(), and add the data of the duplicate one to it?
var marker = new google.maps.Marker({
map: map,
position: latlng
});
for (var i=0; i<markers.length; i++) {
if (markers[i].getPosition().equals(marker.getPosition())) {
alert('duplicate found');
alert(infoWindow.getContent());
} else {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
}
I am pretty sure you can't do exactly what you want.
As far as I am aware, and can see in the API, neither the infowindow or the marker knows anything about eachother. The only thing that knows which infowindow should be shown when clicking a certain marker is the google maps eventhandler.
A solution to your problem would then be to store all the infowindows in an array, and the markers in another array where you would make sure that the index of the corresponding markers and infowindows where the same.
Another way to do it would be to define your own object where you make sure it can hold both a marker and a infowindow.
In any way, you would have to loop through the markers array to find the duplicate marker and then get the corresponding infowindow by using one of the two scenarios I have described. It seems a bit silly, but I am not aware of another way to do it.