Google Map Markers - Links to div class

671 views Asked by At

I need to put a link on a Google map marker. It works with an external URL (http://...) but it doesn't with a div link. When we click on a marker, I want that it opens a div with a modal effects.

Here is the HTML with the div to open :

<div class="modal faune">     
  <div class="barre_gallery">                                
        <img alt="" class="close" onclick="$.fn.custombox('close');" src="img_content/croix.png" width="30"/>
        <h1>Test</h1>    
   </div>    

    <p>Paragraphe test</p>

</div> 

Here is the JS :

var gmarkers1 = [];
    var markers1 = [];
    var infowindow = new google.maps.InfoWindow({
        content: ''
    }); 

markers1 = [

     ['4', "Les ânes de Pontisse",  50.692001,  5.639683, 'faune', 'content/pictos/picto_faune.png', '$(".modal.faune")'],

     ]

function addMarker(marker) {
            var category = marker[4];
            var title = marker[1];
            var pos = new google.maps.LatLng(marker[2], marker[3]);
            var content = marker[1];
            var icon = marker[5];
            var url = marker[6]

marker1 = new google.maps.Marker({
                title: title,
                position: pos,
                category: category,
                map: map,
                icon : icon,
                url: url,
});

gmarkers1.push(marker1);

// Marker click listener
    google.maps.event.addListener(marker1, 'click', function() {
                window.location.href = this.url;
               this.addClass("list-group-item blur");
            });         

}

Do you have any ideas ? Thanks !

2

There are 2 answers

1
duncan On

window.location.href = $(".modal.faune") isn't going to work. You need to have some logic to work out if it's an external href or a div link (e.g. a boolean attribute on each marker).

if (external link)
   window.location.href = this.url;
else 
   this.url.trigger('click');
2
ManyStylez On

What about calling the modal from the marker event listener?

google.maps.event.addListener(marker1, 'click', function() {

    Custombox.open({
        target: '.faune',
        effect: 'fadein'
    });
    e.preventDefault();

});   

edit: it would be good to know what modal you were using as well to help you out.

Assuming http://dixso.github.io/custombox/ this is the modal you are using.