CODEWITHSUNDEEP
javascriptgoogle-maps
DiscontentDisciple
DiscontentDisciple

Reputation: 466

Google Maps Clicking on a Div to Trigger InfoWindow

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!

Upvotes: 0

Views: 1094

Answers (2)

Marcelo
Marcelo

Reputation: 9407

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);
}

Upvotes: 0

Philippe Boissonneault
Philippe Boissonneault

Reputation: 3949

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'));

Upvotes: 2

Related Questions