info window custom close button - javascript

I have an instance of google.maps.InfoWindow, and it has a custom closing button. Which is triggered by onClick event. However, if I click on close button, the info window is closed, which is expected, but a new marker appears on the map, on a place where info window use to be. It looks like the onClick="infoWindow.close()" is the placeReclameMarker(event.latLng); simultaneously.
var map;
var infoWindow;
function initialize() {
var latlng = new google.maps.LatLng(47.030698, 28.850098);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function (event) {
placeReclameMarker(event.latLng);
});
}
function placeReclameMarker(location) {
var marker = new google.maps.Marker({
position: location,
draggable: true,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function () {
infoWindow = new google.maps.InfoWindow({
content: '<input type="button" onclick="infoWindow.close()">'
});
infoWindow.open(map, marker);
});
}

i'm not sure you can visit infoWindow variable in infoWindow object inner.
try:
content: '<input type="button" onclick="parent.infoWindow.close()">'
or
content: '<input type="button" onclick="parent.parent.infoWindow.close()">'
or
content: '<input type="button" onclick="alert(infoWindow)">'
infoWindow variable must not to be undefined.
good luck

I was having the same problem. Found the solution. The thing is you should not only close the InfowWindow, but kill the marker also.
Try this;
var map;
var marker;
var infoWindow;
function whateverFunction() {
// some code here to create the marker and the infoWindow
infoWindow.open(map, marker);
infoWindow.setContent('<input type=button name=Close onClick="marker.setMap(null);">');
}
Worked perfectly for me.

Related

Removing title tag attribute from google map

I want to completely remove the title tag when the user mouseovers on the marker. This is what I have tried so far.
jQuery("[title]").removeAttr("title");
jQuery("*").removeAttr("title");
Neither works.
I have referred to the below solutions also.
removing default mouseover tooltip from marker in google-maps
title of a marker of google map marker API
But could not find any solution that actually removes the title tag.
I have updated the script set properties: title: ''.
Updated
and it worked: http://jsfiddle.net/edf3gwuk/
var infowindow = new google.maps.InfoWindow();
function point(lat, long) {
var self = this;
self.name = name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: '',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function (e) {
e.mb.target.removeAttribute('title')
//infowindow.setContent(marker.title);
//infowindow.open(map, marker);
}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
}.bind(this));
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 5,
center: new google.maps.LatLng(55, 11),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new point(58, 14);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<section id="Map">
<div id="googleMap" style="width:350px;height:600px;"></div>
</section>
my solution is set to the content of the label is empty

Event for showing map marker content in google map

I have a google map integration in my ionic app. I want my marker on map appear whenever map appears however it depends on 'click' event. I have changed into 'idle' however, it doesn't even show the content of marker.
Question: Into what shall I change 'click'?
function getMap(lat, lon, content) {
var latLng = new google.maps.LatLng(lat, lon);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce($scope.map, 'idle', function () {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
}
just delete google.maps.event.addListener(marker, 'click', function () {}) and leave infoWindow.open($scope.map, marker); alone

google maps: open infowindow after map & marker load

I'm working with google maps api 3. It's a bit of annoyance, but how do I get infowindow.open after the marker and the map have loaded?
I've tried to add various listeners such as tilesloaded and idle and haven't had any joy.
In this working example you see the infowindow is loading before anything else:
http://codepen.io/anon/pen/WvbexY
function initialize() {
if (document.getElementById("maper")) {
var latlng = new google.maps.LatLng(52.370778, 4.899448);
var mapOptions = {
zoom: 11,
center: latlng,
scrollwheel: "",
scaleControl: "",
disableDefaultUI: "",
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var tinygmaps = new google.maps.Map(document.getElementById("maper"), mapOptions);
var marker = new google.maps.Marker({
map: tinygmaps,
position: tinygmaps.getCenter()
});
var contentString = '<p>WHY ME FIRST?</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
});
infowindow.open(tinygmaps, marker);
//var openwindow = google.maps.event.addListener(tileListener, 'tilesloaded', open_infowindow); // Hummmm!
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function open_infowindow() {
infowindow.open(tinygmaps, marker);
google.maps.event.removeListener(tileListener);
};
Edit: Changed the codepen to listen for tilesloaded before displaying the infowindow. The fork of your codepen with the tilesloaded listener is here: http://codepen.io/brenzy/pen/VLYwGN
Because SO needs some code:
google.maps.event.addListenerOnce(tinygmaps, 'tilesloaded', function() {
// open the infowindow
});
On my machine, listening for both tilesloaded and idle appear to function the same. (Without either listener, the infowindow is displayed before the map.)
I am assuming that your version didn't work, because you missed the line
infowindow.open(tinygmaps, marker);
when you were refactoring, so the infowindow was being opened before the listener fired.

Google Maps API - InfoWindow not opening with custom marker icon

I've spent a few days trying to fix this to no avail. Any help would be appreciated.
I have a very simple Google map with one marker which when clicked zooms in and displays an infoWindow. My problem is that when I replaced the standard marker with a custom image marker, it zooms in but the infoWindow fails to appear. I've been using the Google API doco and a bit of cut & paste to get this.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-22.062160, 144.142205);
var mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'images/cccMap.png';
var myLatLng = new google.maps.LatLng(-22.062160, 144.142205);
var cccMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'Click to zoom to Orielton, Crown Cattle Company',
animation: google.maps.Animation.DROP
})
var infowindow = new google.maps.InfoWindow({
content:"<h1>Orielton</h1><p>Welcome to the center of Queensland.</p><p>View Photos or Videos</p>",
maxWidth: 200
});
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm sure it's something simple, but I could really use the help. Cheers.
You did it almost right. marker was undefined in click event listener:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
Change your event listener to:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(cccMarker.getPosition());
infowindow.open(map, cccMarker);
});
}
Here is the whole code at jsbin. Note: you will not see the pointer icon there because it is on my system and I do not know how to provide it. But you have the code to compare.
And here is the result from my system:
Your Code:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
You are attempting to assign a marker "cccMarker" as first parameter, but it is assigned (as properly attempted) in the line infowindow.open(map,marker); – remove your first parameter of addListener() and properly assign it as "cccMarker" (you wrote "marker") in infowindow's open().
It should look like:
google.maps.event.addListener('click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,cccMarker);
});
This way it should work properly.

How do I close an infowindow with Google Maps 3 API?

I've seen the other posts, but they dont have the markers being looped through dynamically like mine. How do I create an event that will close the infowindow when another marker is clicked on using the following code?
$(function(){
var latlng = new google.maps.LatLng(45.522015,-122.683811);
var settings = {
zoom: 10,
center: latlng,
disableDefaultUI:false,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
$.getJSON('api',function(json){
for (var property in json) {
if (json.hasOwnProperty(property)) {
var json_data = json[property];
var the_marker = new google.maps.Marker({
title:json_data.item.headline,
map:map,
clickable:true,
position:new google.maps.LatLng(
parseFloat(json_data.item.geoarray[0].latitude),
parseFloat(json_data.item.geoarray[0].longitude)
)
});
function buildHandler(map, marker, content) {
return function() {
var infowindow = new google.maps.InfoWindow({
content: '<div class="marker"><h1>'+content.headline+'</h1><p>'+content.full_content+'</p></div>'
});
infowindow.open(map, marker);
};
}
new google.maps.event.addListener(the_marker, 'click',buildHandler(map, the_marker, {'headline':json_data.item.headline,'full_content':json_data.item.full_content}));
}
}
});
});
I finally figured it out... no thanks to anyone here... It was actually fairly easy:
First, set up some vars to store the infowindow:
var infowindow;
Then add this to wherever your onClick function is that triggers the other infowindow.open(). Put it above the open though:
if(infowindow) {infowindow.close()}
Inside your loop or however else you are adding markers.
E.g. in full action:
At the very top of my script:
var infowindow;
Inside my loop of adding markers:
function buildHandler(map, marker, content) {
return function() {
if(infowindow) {infowindow.close()}
infowindow = new google.maps.InfoWindow({
content: 'My Content here'
});
infowindow.open(map, marker);
};
}

Categories