OK, I've tried a ton of the examples on here and I just can't seem to get the Info Windows to get the Element Properly Appended. I'm sure this is something with How I've structured this that is simply wrong.
I've made my own Sidebar, and looking at this: http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm it should be possible. But I can't see what's different than my code.
So here's my AddMarker and Add Sidebar Functions
function addMarker(location, name, content) {
console.log("Adding Marker: "+location)
if (name === "Patient"){
var patient_icon = '<?php echo base_url();?>images/Profile.png';
var marker = new google.maps.Marker({
position: location,
map: map,
title: name,
icon: patient_icon
});
}else{
var marker = new google.maps.Marker({
position: location,
map: map,
title: name
});
}
markersArray.push(marker);
var info = new google.maps.InfoWindow ({content: content})
google.maps.event.addListener(marker, 'click', function(){info.open(map,marker);});
if (name != 'Patient'){
sidebar(name, marker, content)
}
}
function sidebar(name, marker, content){
name = name.replace(/\s+/g, '');
$("<div id='"+name+"'class='even' onclick=' function(){google.maps.event.trigger("+marker+", \"click\")' >"+content+"</div>").appendTo($('#prov_list'));
}
What am I missing that the Onclick Function on the Sidebar elements does Nothing?
Thanks!
You can try something like this, i think the problem was with the string concatenation.
Here's another way to create dom elements:
$("<div/>", {
'id': name,
'class': 'even',
'html': content
}).click(function(){
google.maps.event.trigger(marker, 'click');
}).appendTo($('#prov_list'));
Plain old DHTML:
function sidebar(name, marker, content){
var container = document.getElementById('prov_list');
var myDiv = document.createElement('DIV');
myDiv.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
myDiv.innerHTML = content;
container.appendChild(myDiv);
}
Related
For some reason, Google is rendering an empty div in Google Maps infoWindow card. I'm following the normal practice in which I'm initiating Google Maps via initMap() and to add infoWindow I'm using:
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
How do I remove this div? or place my content in the div?
For deleting a div in javascript you can simply use remove() function via dot notation.
Just like this:
document.getElementById("element").remove();
But since you don't have a special id or class in your desired DOM item that couldn't be a solution. So you have to get the parent node and remove its children. All you have to do is to use removeChild(/*element.lastChild*/). So it will be something like this:
const element = document.querySelector('.gm-style-iw-d');
element.removeChild(element.lastChild);
UPDATE
If you want to disable the context menu in your other div to make them look like the same, there are two ways to do that.
First, you can do this by manipulating HTML itself like this:
<div oncontextmenu="return false;"></div>
Or by manipulating the DOM after the initial load:
HTML
<div id='elementId'></div>
Javascript
document.getElementById('elementId').addEventListener('contextmenu', function() {
return false;
});
UPDATE 2
This is not the best approach to achieve what you wanted but you can do this in order to close the dialog whenever the user clicks anywhere in the map except marker and dialog itself. According to the google map document you can use .close() method to close InfoWindow just like this:
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
});
// Check for custom icon
if (props.iconImage) {
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
setTimeout(() => {
var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
}, 1);
});
}
google.maps.event.addListener(map, "click", function(event) {
infoWindow.close();
});
}
UPDATE 3
To achieve closing old infoWindow you should create a unique infoWindow and update its content to having just one that gets closed/opened on each marker.click. So in this way, it will be working like a charm.
var infoWindow = null;
// Add marker function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
// icon: './img/marker1.png'
});
// Check for custom icon
if (props.iconImage) {
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if (props.content) {
google.maps.event.addListener(marker, 'click', function() {
if (infoWindow) {
infoWindow.close();
}
infoWindow = new google.maps.InfoWindow({
content: props.content
});
infoWindow.open(map, marker);
setTimeout(() => {
var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
}, 10);
});
}
google.maps.event.addListener(map, "click", function(event) {
infoWindow.close();
});
}
Here is the link to the working demo: JSFiddle
I have this google map which is working, I want to add a button on infowindow which somehow is not working. Though the function is defined but still throw error
http://jsfiddle.net/mpgxn53q/
<div id="apptMap"></div>
//the js code
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
var locations = [["158845-001 - Adas Israel Congregation",38.9369545,-77.0575097,1],["163888-137 - Construction LLC",43.1765812,-84.6986701,2.0],["163888-155 - Construction LLC",43.1765812,-84.6986701,3.0],["167176-007 - GLDB MTM10 GLR016",42.4894512,-95.5449508,4.0],["167195-003 - 91622 DB A4",42.8275053,-84.5717997,5.0],["167195-002 - 91622 DB A4",42.8275053,-84.5717997,6.0],["167176-005 - GLDB MTM10 GLR016",42.0023,-93.6110955,7.0],["167176-004 - GLDB MTM10 GLR016",42.0023,-93.6110955,8.0]];
var map;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('apptMap'), {
zoom: 10,
center: new google.maps.LatLng(42.0023,-93.6110955),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html +'<button onclick="mapsZoomMarker('+i+')">Click me</button>',
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
function mapsZoomMarker(wnMarker){
map.setCenter(markers[wnMarker].getPosition());
map.setZoom(15);
}
init();
There is a problem with scopes, and that's because of that how you wrote your script. I am not going to rewrite your script, but I will give you solution for your exact situation.
You need to define your function mapsZoomMarker in global scope (window object) like this:
window.mapsZoomMarker = function (wnMarker){
map.setCenter(markers[wnMarker].getPosition());
map.setZoom(15);
}
And there is also a mistake, in the function which is called when the marker is clicked. When you assign the html for the popup like this
content: this.html +'<button onclick="mapsZoomMarker('+i+')">Click me</button>'
the i variable is already set to 8, so instead of that just use this.id like this:
content: this.html +'<button onclick="mapsZoomMarker('+this.id+')">Click me</button>'
And this is the updated fiddle http://jsfiddle.net/rn27f05v/
I will propose a solution that I think is best for what you want. Instead call function inside var infowindow, you can only define a variable to put content your want.
You can change you var infowindow to:
var infowindow = new google.maps.InfoWindow({
id: this.id,
content: content, //here the variable that call your content
position:this.getPosition()
});
So... above your google.maps.event.addListener(markers[i], 'click', function(){... you can add:
var content = '<button onclick="mapsZoomMarker('+i+')">Click me</button>';
This way the click action will work.
Hope this tip help you.
I would like to change the marker icon, when the user hovers his mouse over a div tag. I found a close solution, where the marker icon changes when the user hovers his mouse over the marker itself. But I would like to change it using div tags.
The code:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
id: 1,
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);
});
My set up shall look like this:
<div class="sth" onmouseover="ShowMarker(id)" />
And my JS sth like:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
id: 1,
icon: icon1,
title: "some marker"
});
function ShowMarker(id) {
google.maps.event.addListener(marker, 'mouseover', function() {
marker[id].setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker[id].setIcon(icon1);
});
}
This code should change only the selected marker by id.
Could anyone change my code to a working one?
I would really appreciate it.
Thanks in advance.
You have to make a listener on the div you want :
<div class="sth" onmouseover="hover(1)" onmouseout="out(1)">MARKER 1</div>
<div class="sth" onmouseover="hover(2)" onmouseout="out(2)">MARKER 2</div>
Then push your markers in another variable, and loop on it :
var allMarkers = [];
var marker = new ...();
allMarkers.push(marker);
function hover(id) {
for ( var i = 0; i< allMarkers.length; i++) {
if (id === allMarkers[i].id) {
allMarkers[i].setIcon(icon2);
break;
}
}
}
...
I've done a demo, with comments. Hope it helps :)
I'm trying to write a function, that gives a lat & long, a name and a picture as formal parameters, so a marker on the map will display when clicked: the name and picture.
It seems to work, though when I add multiple Markers, the actual parameters of the last call are passed to all. And so every Marker I click, will pop up the same name and picture.
I have no clue what I'm doing wrong here, cause I thought that I scoped everything right.
here is some part of my code
in my Initialise() function, I declared the following:
var marker = add_marker(51.21904,4.32659000000001,"Iggy Jensen","bro.jpg");
fluster.addMarker(marker);
var marker = add_marker(51.20367,4.341480000000047,"John Doe","bro.jpg");
fluster.addMarker(marker);
var marker = add_marker(51.2041539954234,4.327017528991746,"Joske Vermeulen","bro.jpg");
fluster.addMarker(marker);
The function add_marker is written by myself addMarker is a part of Fluster2 a cluster management system that I use.
function add_marker(lat,lng,name,pic) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: 'icon.png',
title: name
});
infoBubble = new InfoBubble({
maxWidth: 300,
backgroundColor: '#dedddd',
borderWidth: 2,
borderColor: 'rgb(68, 68, 68)'
});
var contentString = '<div id="content">'+
'<h2>'+name+'</h2>'+
'<p><span class="myLabel" style="margin-right:10px">Age </span>21</p>'+
'<p><center><img src="'+pic+'" class="bro_image"></center> </p>'+
'</div>';
var div = document.createElement('DIV');
div.innerHTML = 'No pictures uploaded by this user.';
infoBubble.addTab('Personal', contentString);
infoBubble.addTab('Pictures', div);
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});
return marker;
}
function addTab() {
var title = document.getElementById('tab-title').value;
var content = document.getElementById('tab-content').value;
if (title != '' && content != '') {
infoBubble.addTab(title, content);
}
}
Any help is appreciated! Thanks in advance!
Just add 'var' before infoBubble definition, otherwise everytime you are assigning a new InfoBubble object to the same global variable:
var infoBubble = new InfoBubble({
// ^---------here it is
So i have several markers appearing from an array, but i'm having a lot of difficulty setting the content of the InfoWindows that appear
I put the titles in which works great, but when I try to set the content, it doesn't set the content, but still shows the title.
What am I doing wrong?
for (index = 0; index < data.length; ++index) {
locationName = data[index].LocationName;
locationID = data[index].LocationID;
locationX = data[index].XCord;
locationY = data[index].YCord;
var infoContent = '<div><h3>' + data[index].LocationName + '</h3></div><div>' + data[index].LocationID + '</div>';
var mapLocation = new google.maps.LatLng(locationX,locationY);
var marker = new google.maps.Marker({ // Set the marker
position: mapLocation, // Position marker to coordinates
icon: image, //use our image as the marker
map: map, // assign the marker to our map variable
title: data[index].LocationName,
content: infoContent
//draggable:true //Have a guess what this does
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, index) {
return function () {
infoWindow.setContent(infoContent);
infoWindow.setContent(this.title);
infoWindow.open(map, this);
}
})(marker, index));
var infoWindow = new google.maps.InfoWindow({
content: infoContent
}), marker, index;
}
You are calling setContent twice:
infoWindow.setContent(infoContent);
infoWindow.setContent(this.title);
I guess the last one should be removed.
Edit:
To get the correct infoWindow content, try moving the creation of the eventListener to a function:
// Allow each marker to have an info window
updateInfoWindowOnMarkerClick(marker, infoContent);
//Somewhere after the loop
function updateInfoWindowOnMarkerClick(marker, infoContent){
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(infoContent);
infoWindow.open(map, this);
});
}
Have a look at JavaScript closure inside loops – simple practical example for more information about function scope.