2016-06-09 16 views
1

Ich versuche ein benutzerdefiniertes Informationsfenster für Google Maps zu erstellen.Benutzerdefinierte Infofenster für Google Maps?

Ich bin irgendwie erfolgreich mit einer Ausnahme! Grundsätzlich ist das Hauptinformationsfenster immer noch sichtbar und ich habe keine Ahnung, wie ich es entfernen oder verstecken kann.

Dies ist ein Arbeits FIDDLE

Und das ist, was ich folgendes: custom info window

Ich habe diesen Code, wie oben in den Link erwähnt:

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

Aber dies scheint nicht alles zu tun, wie du in meiner Fiddle sehen kannst.

Könnte jemand bitte zu diesem Thema beraten?

Jede Hilfe wäre willkommen.

Vielen Dank im Voraus.

Edit:

Ich glaube, ich bin immer irgendwo.

Ich habe eine benutzerdefinierte Funktion erstellt und legen Sie den gesamten Code für das Entfernen des Hintergrunds darin. und dann rufe ich die customFunction(); direkt nach html = '' Zeug.

Aber das Problem ist, dass es nicht für den ersten Klick funktionieren wird, aber es wird für die zweiten Klick arbeiten oder dritten klicken etc ...

Ich habe die FIDDLE here

Vorschläge aktualisiert?

ZWEITER EDIT:

Erste ganz in der Nähe.

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

Wenn Sie auf eine Markierung klicken und dann auf die zweite Sie sehen das Ergebnis würde, die ich suche. (kein Hintergrund für das Hauptfenster).

Ich verstehe einfach nicht, warum es nicht für den ersten Klick funktioniert !!

+0

scheint zu funktionieren erste Mal für mich angewendet werden, was genau nicht passiert auf den ersten Klick? – DBS

+0

@DBS, ich brauche nicht den Hintergrund für das Haupt-Pop-up ...Wenn du auf einen der Marker klickst und dann auf einen anderen klickst, wirst du sehen, dass der Hintergrund des ersten Infofensters verschwindet, was ich will. Hoffe, dass das Sinn macht. – Jackson

Antwort

1

Bitte sehen Sie Ihre aktualisierte Fiddle here.

Verschieben Sie einfach die var html = "..."; und var iw = new google.maps.InfoWindow({...}) außerhalb der Klick-Listener Ihres Markers. Der Klick-Listener für die Markierung einfacher gemacht werden könnte wie folgt:

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

Auch Ihre createMarker() Funktion sollte als

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