Пользовательское информационное окно для карт Google?

Question

Я пытаюсь создать пользовательское информационное окно для карт Google.

У меня есть вид успеха за одним исключением! В основном, главное информационное окно все еще видно, и я понятия не имею, как его удалить или скрыть.

Это рабочий FIDDLE

И это то, что я следую: custom info window

У меня есть этот код, как указано в ссылке выше:

// Reference to the DIV which receives the contents of the infowindow using jQuery 
    var iwOuter = $('.gm-style-iw'); 

    /* The DIV we want to change is above the .gm-style-iw DIV. 
    * So, we use jQuery and create a iwBackground variable, 
    * and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev(). 
    */ 
    var iwBackground = iwOuter.prev(); 

    // Remove the background shadow DIV 
    iwBackground.children(':nth-child(2)').css({'display' : 'none'}); 

    // Remove the white background DIV 
    iwBackground.children(':nth-child(4)').css({'display' : 'none'}); 

Но это не кажется делать что угодно, как вы можете видеть на моей скрипке.

Не могли бы вы прокомментировать эту проблему?

Любая помощь будет оценена по достоинству.

Заранее спасибо.

Edit:

Я думаю, что я где-то.

Я создал пользовательскую функцию и поместил весь код для удаления фона в нем. и затем я вызываю customFunction(); сразу после html = ''.

Но проблема в том, что она не будет работать для первого щелчка, но он будет работать на второй клик или третий нажмите и т.д ...

Я обновил FIDDLE here

какие-либо предложения?

ВТОРОЙ EDIT:

Получение очень близко.

https://jsfiddle.net/8yL2vhoe/3/

Если нажать на один маркер, а затем нажмите на второй вы видите результат, что я ищу. (нет фона для основного всплывающего окна).

Я просто не понимаю, почему он не работает для первого щелчка!

Answer 1

См. Обновленный Fiddle here.

Просто переместите var html = "..."; и var iw = new google.maps.InfoWindow({...}) за пределы слушателя вашего маркера. Клика слушатель для маркеров может быть проще, как показано ниже:

var activeInfoWindow; 
function infoWindow(marker, map, title, address, url) { 
    var html = "..."; 
    var iw = new google.maps.InfoWindow({  
     content: html,    
     //maxWidth: 350   
    },customFunction()); 
    google.maps.event.addListener(marker, 'click', function() { 
      if (activeInfoWindow != null) activeInfoWindow.close(); 
      iw.open(map, marker); 
      activeInfoWindow = iw;  
      customFunction(); 
    }); 
} 

Кроме того, ваша createMarker() функция должна быть применена в качестве

function geocodeAddress(locations, i) { 
    var title = locations[i][0]; 
    var address = locations[i][1]; 
    var url = locations[i][2]; 
    geocoder.geocode({ 
     'address': locations[i][1] 
    }, 
    function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      createMarker(results, url, title, address); 
     } else { 
      alert("geocode of " + address + " failed:" + status); 
     } 
    }); 
} 
function createMarker(results, url, title, address) { 
    var marker = new google.maps.Marker({ 
     icon: url, 
     map: map, 
     position: results[0].geometry.location, 
     title: title, 
     animation: google.maps.Animation.DROP, 
     address: address, 
     url: url 
    }); 
    infoWindow(marker, map, title, address, url); 
    bounds.extend(marker.getPosition()); 
    map.fitBounds(bounds);  
}