I am using the standard infoWindow dialog. However there is a 2px offset where the speech bubble and arrow meet:
Any reason this might be happening?
This is a sample of the code I'm using:
var infoWindow = new google.maps.InfoWindow({});
google.maps.event.addListener(marker, 'click', function() {
var contentString = '<p>Content Here</p>';
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
});
Related
I'm working on a school project where I´m using google maps to make a travel planer. the idea is that the user can drop markers on the map and fill them with text. so far I've managed to load google maps and I can drop markers but I can´t get the infowindows to work. When I looked at googles API it said to make a marker, make an infowindow and the use an addlistener to open the infowindow when the marker is clicked, all the different tutorials also say the same thing but I can´t get it to work. so far my code looks like this:
function initialize()
{
var mapOptions =
{
zoom: 2,
center: {lat: 0.0, lng: 0.0}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'rightclick', function(event) {
var marker = new google.maps.Marker({
position: event.latLng, //map Coordinates where user right clicked
map: map,
draggable:true, //set marker draggable
animation: google.maps.Animation.DROP
});
});
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">New Marker</h1>'+
'This is a new marker infoWindow'+
'</span>'+
'</div></div>');
//Create an infoWindow
var infowindow = new google.maps.InfoWindow();
//set the content of infoWindow
infowindow.setContent(contentString);
//add click event listener to marker which will open infoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker); // click on marker opens info window
});
}
can anyone tell me what i´m doing wrong? the entire code can be seen here: http://pastebin.com/R1bg0gi4
as commented by duncan, you must move the code that set's the click-listener of the marker into the rightclick-handler of the map, after the creation of the marker
the content for an Infowindow may be a string or a element-node, you supply none of them(a jQuery-object)
function initialize()
{
var mapOptions =
{
zoom: 2,
center: {lat: 0.0, lng: 0.0}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions),
//Create an infoWindow
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'rightclick', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable:true, //set marker draggable
animation: google.maps.Animation.DROP
});
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">New Marker</h1>'+
'This is a new marker infoWindow'+
'</span>'+
'</div></div>')[0];
//set the content of infoWindow
infowindow.setContent(contentString);
//add click event listener to marker which will open infoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm using a dom listener to set the center of the map when a user is resizing the window, but i'm confused because nothing happens!? What have I missed? Every thing else works fine with the map in responsive design. Help is preciated.
If someone is wondering why I have this code {$mapPoints} this is a PHP string of all markers.
EDIT 2:
At start I have the markers in the center of the map. Then I pan the map and the markers isn't in the center any more. When I resize the window I want the markers at the center of the map as it was from the beginning (55.678939, 12.568359). Have I miss understodd something or isn't this possible? I have also tried to set the center of the map to the these coordinates when resizing the window.
EDIT 1:
CSS for the map:
#map_canvas
{
width: 100%;
height: 350px;
margin: 20px 0 20px 0px;
}
var map = null;
var infowindow = new google.maps.InfoWindow();
var iconBase = 'images/mapNumbers/number';
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(55.678939, 12.568359),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
google.maps.event.addListener(map, 'zoom_changed', function () {
infowindow.close();
});
google.maps.event.addDomListener(window, 'resize', function() {
//map.setCenter(55.678939, 12.568359);
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
// Add markers to the map
var point;
{$mapPoints}
}
// Create markers
function createMarker(latlng, html, name, number) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name,
icon: iconBase + number + '.png'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
//map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
It seems that at the beginning you almost got it right. I did the following changes:
function initialize() {
var markerPos = new google.maps.LatLng(55.678939, 12.568359);
var myOptions = {
center: markerPos,
...
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: markerPos,
...
});
google.maps.event.addDomListener(window, 'resize', function() {
console.log('window resize');
map.setCenter(markerPos);
var center = map.getCenter();
console.log(center);
// google.maps.event.trigger(map, 'resize');
});
Test should be like you wrote: load the map, pan to the left/right, resize the window. Marker and the map should be centered.
Take a look at the bounds_changed event:
google.maps.event.addListener(map, 'bounds_changed', function() {
//do really cool stuff and change the world or at least a map of it
}
I created a google maps (api v3) with the number of markers depending on the search results. When I click a marker, it opens an infowindow. What's the best way to have that infowindow show information associated to its marker? The information related to all the markers is in a json object I receive from an ajax request.
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'specific information associated to the marker clicked'
});
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infowindow.open(map, this);
});
Create only 1 infoWindow as suggested above.
The content store inside the marker:
var marker = new google.maps.Marker({
position: latLng,
title: i.toString(),
//set your content here
content:'your specific content'
//map: map
});
The opening of the window:
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infoWindow.setContent(this.content);
infowindow.open(map, this);
});
First, you should move the the creation of the infoWindow out of the for loop.
Next, change where you attach the click event to this:
google.maps.event.addListener(markersArray[i], 'click', function(content) {
return function(event){
infowindow.setContent(content);
infowindow.open(map, this);
}
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER));
You want to use this instead of marker. this will refer to the object the event took place on, while marker will refer to the last marker created.
You have some typos in your example (proint) At the top of you loop:
for (i=0; i < result.point.length; i++) {
var info_window_content = result.point[i].Latitude + '<br />';
info_window_content += result.point[i].Longitue + '<br />';
// etc for any value in you json object
// create your marker as is.
...
var infowindow = new google.maps.InfoWindow({
content: info_window_content
});
// etc, etc.
You do need to add an eventListener to each marker, as you are doing. I don't see any problem with that.
Except I'd use infoWindow.open(map, marker) vs. this.
There is probably a more efficient way to do it, i.e. after infoWindow.open(); infoWindow.setContent(info_window_content)
Try this, it works I tested it already
// Add markers
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
// marker info start
var infowindow = new google.maps.InfoWindow();
(function (marker, result.point[i]) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
var infoContent: "specific information associated to the marker clicked"
});
infoWindow.setContent(infoContent);
infowindow.open(map, marker);
});
// selected marker 4 infowindow
(marker, result.point[i]);
markersArray.push(marker);
}
Not entirely sure what it is you are trying to do. Where/ what content are you trying to load?
google.maps.event.addListener(marker, 'click', (function(event, index) {
return function(){
infowindow.content = markersArray[index].yourcontent;
// or
infowindow.content = yourcontentarray[index];
infowindow.open(map,this);
}
})(marker,i));
Make sure you declare your marker and infowindow variables outside of a function.
var image = 'bullets/_st_zzzzzzl SSS.gif';
var bar1 = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: "bar number 1"
});
google.maps.event.addListener(bar1, 'mouseover', function() {
infowindow.open(map,bar1);
});
google.maps.event.addListener(bar1, 'mouseout', function() {
infowindow.close(map,bar1);
});
Now when im on mouseover i want the icon to change to another image i got.
i tried some tips and some code but nothing works...
Appreciate ur help
Use marker.setIcon() function. The rest is almost the same as opening/closing infowindow in your code:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
});
Note that besides using image paths in setIcon() function, you can also use google.maps.MarkerImage objects, which are very useful, especially if you want to use image sprites.
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
I'm trying to have the functionality to where I can mouseover and mouseout on markers and pop the infowindow up and auto close it. Then when a user clicks on a marker I disable the mouseout for that marker to display the infowindow until the user manually closes it. I want to add the mouseout back to the marker when the user clicks the close for the infowindow.
I have this code:
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
//setTimeout(function() { infowindow.close(); }, 3000);
infowindow.close(map, marker);
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
google.maps.event.clearListeners(marker, 'mouseout');
});
I'm trying to use the 'click' event to disable the 'mouseout'. The above works. Now I want to add back the 'mouseout' event after the infowindow is closed using the 'closeclick' below.
google.maps.event.addListener(infowindow, 'closeclick', function() {
//google.maps.event.addListener(marker, 'mouseout', "");
});
I'm not sure how to do it. Can someone point me in the right direction?
I figured this out and thought I'd share:
function attachData(marker, number) {
//snipped code that adds the events that are removed in closeMarker
google.maps.event.addListener(infowindow, 'closeclick', function() {
closeMarker(marker, number);
});
}
The closeMarker function clears all current events and adds them back by calling the attachData function.
function closeMarker(marker, number) {
google.maps.event.clearListeners(marker, 'mouseover');
google.maps.event.clearListeners(marker, 'mouseout');
google.maps.event.clearListeners(marker, 'click');
google.maps.event.clearListeners(marker, 'closeclick');
attachData(marker, number);
}