I've got a little issue while placing a panTo() into google maps V3. Here is the description of the problem:
In this case, everything goes well, the map moves and animates until it stops at the right point.
var infoWindow = new google.maps.InfoWindow({ content: strHtml });
google.maps.event.addListener(marker, 'click', function()
{
var latitude = marker.position.lat();
var longitude = marker.position.lng();
var panningPoint = new google.maps.LatLng(latitude, longitude);
activeInfoWindow.close();
map.panTo(marker.getPosition());
infoWindow.open(map, marker);
activeInfoWindow = infoWindow;
});
In the other case, I wrote down the map go to the panning point I decided, but instead of animating the map, it just REFRESHES (not animate) and get a similar function to "SetCenter".
var infoWindow = new google.maps.InfoWindow({ content: strHtml });
google.maps.event.addListener(marker, 'click', function()
{
var latitude = marker.position.lat();
var longitude = marker.position.lng();
var panningPoint = new google.maps.LatLng(latitude, longitude);
activeInfoWindow.close();
map.panTo(panningPoint);
infoWindow.open(map, marker);
activeInfoWindow = infoWindow;
});
Why? Are there any differences from getPosition() and collecting lat and long and redrawing a point?
My real problem is that I must pan not right on the point but "x % " bottom for top div overlay problem.
Any suggestions?
Related
i want to add the InfoWindow in my code but it's not working. Map is showing perfectly but when i click the markers on map InfoWindow is not appearing. I also want to get the time in InfoWindow from MYSQL database. Please tell me how can i do this and what is the problem my InfoWindow is not appearing. Here is my InfoWindow Code:
var infowindow = new google.maps.InfoWindow();
var contentString = 'content';
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.addDomListener(window,'load',window.onload);
Marker:
var marker = new google.maps.Marker({position: markerpos,
map: map, icon: icon
});
Please refer the link below.
http://jsfiddle.net/RJPKJ/1/
for (i = 0; i < 5; i++){
var dataProperty = dataitem.property[i];
latitudetest =dataProperty.latitude;
longitudetest = dataProperty.longitude;
var data= dataProperty.property_title;
var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
}
My map has no markers. In response to a click on the map, it pops up an infowindow with Lat/long shown in decimal to 5 dp and in Degrees minutes seconds. An open window is always closed prior to responding to a new click. The position is specified by position: latLng, but the infowindow is ALWAYS at the top left. I've spent days on this, and I feel I'm missing something. Code snippet below. Any ideas?
google.maps.event.addListener(map, 'click', function (event) {
var lat = event.latLng.lat(),
lng = event.latLng.lng(),
latLng = event.latLng,
strHtml;
//
// strHtml build code omitted but succesfully uses lat and lng to produce
// e.g. Latitude : 51.72229 N (51° 43' 20'' N)
// Longitude : 1.45827 E (1° 27' 30'' E)
//
// If an infowindow is open, then close it
if (openedInfoWindow != null) openedInfoWindow.close();
// latLng monitored to check it is there before use in infowindow
alert(latLng); // returns correct values which position then ignores!
var infoWindow = new google.maps.InfoWindow({
position: latLng,
content: strHtml,
maxWidth: 420
});
// Open infoWindow
infoWindow.open(map,this);
// Remember the opened window
openedInfoWindow = infoWindow;
// Close it if X box clicked
google.maps.event.addListener(infoWindow, 'closeclick', function() {
openedInfoWindow = null;
});
});
You have several problems with this code. The second parameter of the infowindow's open method has to be an MVCObject in the Core API only the Marker class can be used as an anchor. You should not need to set the infowindow variable to null and create a new infowindow object each time. You only need a single infowindow and then change its content and position. This way there is only one infowindow shown at a time.
Here is a fiddle of a working example: http://jsfiddle.net/bryan_weaver/z3Cdg/
relevant code:
google.maps.event.addListener(map, 'click', function (evt) {
var content = "<div class='infowindow'>";
content += "Latitude: " + evt.latLng.lat() + "<br/>";
content += "Longitude: " + evt.latLng.lng() + "</div>";
HandleInfoWindow(evt.latLng, content);
});
function HandleInfoWindow(latLng, content) {
infoWindow.setContent(content);
infoWindow.setPosition(latLng);
infoWindow.open(map);
}
The 2nd (optional)argument of infoWindow.open() is expected to be an MVCObject that exposes a position-property.
the this argument in the callback refers to a google.maps.Map-Instance(map), which is an MVCObject, but doesn't have a position-property.
Remove the 2nd argument from infoWindow.open(map,this); .
I'm trying to have custom infowindows float above markers, however I noticed that only one marker can be opened at any one time. Is there a workaround to this?
Here's the code I have produced at the moment:
downloadUrl("AllActivityxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
var infowindow = new google.maps.InfoWindow();
var html = "<b>" + point + "</b>hello <br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map,marker);
});
}
});
And when you check this map, notice that I cannot open more than 2 infowindows at once. Why is that?
There is no limitation implicit to the Google Maps API v3 that makes only one InfowWindow available at a time. You need to write your code to do that. If you want an InfoWindow for each marker, make one.
Some thing like (not tested):
function createMarker(latlng, html) {
var contentString = html;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
One of my applications shows multiple location markers on a Google map. How can I show an InfoWindow after a short delay?
Here is my script:
google.maps.event.addListener(marker, 'mouseover', onMarkerClick);
//create a function that will open an InfoWindow for a marker mouseover
var onMarkerClick = function() {
var marker = this;
var latLng = marker.getPosition();
infowindow.setContent(
'<h3>Marker position is:</h3>' + latLng.lat() + ', ' + latLng.lng());
infowindow.open(map, marker);
};
setTimeout should do what you want. The number is the millisecond delay.
setTimeout(function() { infowindow.open(map, marker) }, 500);
My Code looks like this:
var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var infobox = new google.maps.InfoWindow({
content: 'Hello world'
});
for(i in results){
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('blablabla');
infobox.open(map,marker);
alert(infobox.content); //displays 'blablabla'
});
}
}
});
Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.
Problem is: the infoWindow displays empty.
Screenshot here:
PS: Using Maps API V3
I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.
Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see:
http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
Here is how I have done it.
var map,markersArray,infowindow; //infowindow has been declared as a global variable.
function initialize(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.5001524,-0.1262362),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
markersArray = [];
}
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}
You can find the working example here and the complete javascript here.
I have resolved issue by adding below code.
setTimeout(function () { GeocodeMarker.info.open(GoogleMap,
GeocodeMarker); }, 300);
Thanks