Google Maps Anzeige: Keine Problem

Ich versuche eine Google Map zu erstellen, die angezeigt wird, wenn auf einen Link geklickt wird und dann ausgeblendet wird, wenn auf einen anderen Link geklickt wird. Alles funktioniert gut, außer wenn ich die Karte vom Display zeige: keine, es wird nicht richtig angezeigt.Google Maps Anzeige: Keine Problem

Ich habe gelesen über die Verwendung von google.maps.event.trigger (map, 'resize'); aber ich bin nicht kompetent genug, um mit Javascript und JQuery zu wissen, wie es fügen in

Hier ist der Code, den ich verwendet habe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #viewmap { 
       position:relative; 
       width:944px; 
       float:left; 
       display:none; 
      } 
      #hidemap { 
       position:relative; 
       width:944px; 
       float:left; 
       display:block; 
      } 
      #map_canvas { 
       position:relative; 
       float:left; 
       width:944px; 
       height:300px; 
      } 
     </style> 
     <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> 
     </script> 
     <script type="text/javascript"> 
      function initialize() { 
       var latlng = new google.maps.LatLng(-27.999673,153.42855); 
       var myOptions = { 
        zoom: 15, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
        } 
       }; 

       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

       var contentString = 'blah'; 

       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
       }); 

       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map,marker); 
       }); 
      } 

      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
     <script type="text/javascript"> 
      function toggleDiv1(viewmap){ 
       if(document.getElementById(viewmap).style.display == 'block'){ 
        document.getElementById(viewmap).style.display = 'none'; 
       }else{ 
        document.getElementById(viewmap).style.display = 'block'; 
       } 
      } 
      function toggleDiv2(hidemap){ 
       if(document.getElementById(hidemap).style.display == 'none'){ 
        document.getElementById(hidemap).style.display = 'block'; 
       }else{ 
        document.getElementById(hidemap).style.display = 'none'; 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <div id="viewmap"> 
      <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a> 
      <div id="map_canvas"></div> 
     </div> 
     <div id="hidemap"> 
      <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a> 
     </div> 
    </body> 
</html>

Jede Hilfe wäre sehr willkommen,

Quintin

Quelle

2011-01-15 Quintin Hobson

diese Probleme geschieht auch mit den jquery Tabs anstelle der Anwendung „display: none“, können Sie hidding die Karte auf diese Weise versuchen:

Fügen Sie den followin g Stile, wenn Sie die Karte zu verbergen versuchen, statt mit display: none

position: absolute; 
left: -100%;

Sie auch Übergänge wie hinzufügen: Übergang: links zu erleichtern 1s;

Sie können mit Google-Ereignis-Listener versuchen, es auslösenden, nachdem Sie die Karte anzuzeigen:

<script type="text/javascript"> 
    var map; //I placed here the map variable so other functions can see it. 
    var latlng = new google.maps.LatLng(-27.999673,153.42855); 
    // in order to center again the map... 
    function initialize() { 

     var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: true, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
      } 
     }; 

     map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

     var contentString = 'blah'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,marker); 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<script type="text/javascript"> 
    function toggleDiv1(viewmap){ 
     if(document.getElementById(viewmap).style.display == 'block'){ 
      document.getElementById(viewmap).style.display = 'none'; 
     }else{ 
      document.getElementById(viewmap).style.display = 'block'; 
      //here is where your map is being displayed again, try here 
      // to trigger the resize event. 
      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(latlng); 
     } 
    } 
    function toggleDiv2(hidemap){ 
     if(document.getElementById(hidemap).style.display == 'none'){ 
      document.getElementById(hidemap).style.display = 'block'; 
     }else{ 
      document.getElementById(hidemap).style.display = 'none'; 
     } 
    } 
</script>

Quelle

2011-01-15 16:09:53 javiertoledos

Hallo Javier, gibt es eine Möglichkeit, es ohne absolute Positionierung zu tun? Können Sie google.maps.event.trigger (map, 'resize') implementieren? in meinen Code? –

Hallo, ich habe ein paar kleinere Änderungen an Ihrem Javascript vorgenommen und funktioniert gut für mich, ich lege die Map-Variable außerhalb der Funktion, damit sie für andere Funktionen verfügbar ist (in Ihrem Fall die Funktion toggleDiv1) und dann wenn Ihr Map div wieder angezeigt wird , können Sie das Größenänderungs-Map-Ereignis auslösen. Ich empfehle Ihnen, diese Dinge mit jQuery zu tun, damit Sie nicht extra Code schreiben müssen. – javiertoledos

Das scheint für die Anzeige der Karte zu funktionieren, aber aus irgendeinem Grund ist es nicht zentriert, wo es sein sollte. Wenn Sie nach links blättern, gibt es einen roten Ballon, wo er zentriert sein sollte. Es funktioniert gut, wenn Sie die Karte von Anfang an sichtbar machen. Aber etwas passiert, wenn das div nicht blockiert und es nicht zentriert bleibt. Weißt du, warum das so sein könnte? –

Sie in der Tat besser, die off-left-Technik!
Hier ist meine Änderungen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #viewmap { 
       position:relative; 
       width:944px; 
       float:left; 
      } 
      #hidemap { 
       position:relative; 
       width:944px; 
       float:left; 
      } 
      #map_canvas { 
       position:relative; 
       float:left; 
       width:944px; 
       height:300px; 
      } 
      .good-bye { 
      position: absolute !important; 
      left: -10000px !important; 
      } 
     </style> 
     <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> 
     </script> 
     <script type="text/javascript"> 
      function initialize() { 
       var latlng = new google.maps.LatLng(-27.999673,153.42855); 
       var myOptions = { 
        zoom: 15, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
        } 
       }; 

       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

       var contentString = 'blah'; 

       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
       }); 

       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map,marker); 
       }); 
      } 

      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
     <script type="text/javascript"> 
      function toggleDiv1(viewmap){ 
       if(hasClass(document.getElementById(viewmap), 'good-bye')) 
       removeClass(document.getElementById(viewmap), 'good-bye'); 
       else 
       addClass(document.getElementById(viewmap), 'good-bye'); 
       return; 
      } 
      function toggleDiv2(hidemap){ 
       if(hasClass(document.getElementById(hidemap), 'good-bye')) 
       removeClass(document.getElementById(hidemap), 'good-bye'); 
       else 
       addClass(document.getElementById(hidemap), 'good-bye'); 
       return; 
      } 

      // http://snipplr.com/view/3561/addclass-removeclass-hasclass/ 
      function hasClass(ele,cls) { 
       return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
      } 

      function addClass(ele,cls) { 
       if (!this.hasClass(ele,cls)) ele.className += " "+cls; 
      } 

      function removeClass(ele,cls) { 
       if (hasClass(ele,cls)) { 
       var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 
       ele.className=ele.className.replace(reg,' '); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <div id="viewmap" class="good-bye"> 
      <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap'); return false;">Hide map</a> 
      <div id="map_canvas"></div> 
     </div> 
     <div id="hidemap"> 
      <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a> 
     </div> 
    </body> 
</html>

Example Link.

Quelle

2011-01-15 19:21:24 ifaour

Danke für eine andere Lösung, ich werde beide Methoden versuchen und sehen, was am besten funktioniert für das, was ich versuche zu tun –

Das Problem mit der Größe der Karte ist, dass sie die Größe des Div kennen muss, auf das es gerendert wird. Im Moment initialisierst du eine Karte beim Laden von Dokumenten, wenn dein div verborgen ist, damit die Karte ihre Größe nicht korrekt berechnen kann - um dieses Problem zu lösen, musst du es einfach erst initialisieren, wenn du div zeigst (nicht onload).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #viewmap { 
       position:relative; 
       width:944px; 
       float:left; 
       display:none; 
      } 
      #hidemap { 
       position:relative; 
       width:944px; 
       float:left; 
       display:block; 
      } 
      #map_canvas { 
       position:relative; 
       float:left; 
       width:944px; 
       height:300px; 
      } 
     </style> 
     <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> 
     </script> 
     <script type="text/javascript"> 
     //your global map object 
     var map = null; 
      function initialize() { 
       var latlng = new google.maps.LatLng(-27.999673,153.42855); 
       var myOptions = { 
        zoom: 15, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        mapTypeControl: true, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
        } 
       }; 

       map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

       var contentString = 'blah'; 

       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
       }); 

       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map,marker); 
       }); 

      } 


      function toggleDiv1(viewmap){ 
       if(document.getElementById(viewmap).style.display == 'block'){ 
        document.getElementById(viewmap).style.display = 'none'; 
       }else{ 
        document.getElementById(viewmap).style.display = 'block'; 
        //check if map object exists (it is created by you initialize function), if not initialize it 
        if (!map) { 
        initialize(); 

        } 
       } 
      } 
      function toggleDiv2(hidemap){ 
       if(document.getElementById(hidemap).style.display == 'none'){ 
        document.getElementById(hidemap).style.display = 'block'; 
       }else{ 
        document.getElementById(hidemap).style.display = 'none'; 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <div id="viewmap"> 
      <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a> 
      <div id="map_canvas"></div> 
     </div> 
     <div id="hidemap"> 
      <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a> 
     </div> 
    </body> 
</html>

Quelle

2011-01-16 01:24:13 Michal

Ah ok, das macht Sinn. Danke für die Antwort. –

Hah super, danke. Keine Ahnung, warum deine Antwort nicht die akzeptierte ist. – unexist

Ich habe versucht, meine Karten ohne Glück zu animieren und kam schließlich mit auf den Punkt:

CSS: Wir die Karte Wrapper-Set mit position:absolute; und visibility:hidden;, weil es seine haben muss normale Abmessungen, um richtig zu rendern.

JavaScript:

$(document).ready(function() 
{ 
    // We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height. 
    $("#mapBtn").one("click", function() 
    { 
     $("#myMap").hide(); 
     $("#myMap").css("visibility", "inherit"); 
     $("#myMap").css("position", "relative"); 
    }); 

    // And now we toggle away nicely 
    $("#mapBtn").click(function() 
    { 
     $("#myMap").slideToggle(400); 
    }); 
});

Quelle

2011-06-17 12:42:13 Mario

Dieser Code Arbeit rechts (mit jQuery 1.2.6): Css: #gog-map{position:absolute; visibility:hidden;}

 $(document).ready(function() { 
    $('a#link').click(function() { 
    if ($('#gog-map').is(':visible')){ 
     $('#gog-map').slideUp('slow');    
    } else{ 
     $('#gog-map').slideDown('slow'); 
     $("#gog-map").css('visibility','inherit'); 
     $("#gog-map").css('position','relative'); 
    } 
    return false; 
    }); 
});

Quelle

2011-08-02 13:48:25 Dmitriy

ich in das gleiche Problem lief heute und fand schließlich diese bei der amtlich Google Maps Javascript API V3 Reference:

Entwickler sollten tr Tippen Sie dieses Ereignis auf der Karte an, wenn sich das div ändert Größe: google.maps.event.trigger(map, 'resize').

Als display:none entsprechen die <div> mit der Größe 0 zu verlassen, es zu display:block wird in der Tat eine Veränderung der Größe zu verändern, so dass daher notwendig, die Karte Größe ändern Ereignis auszulösen.

Arbeitete wie ein Charme für mich.

Quelle

2011-12-21 20:08:20 vaelico

Das ist alles was benötigt wird. Keine Spielereien, nur ein einfacher Ereignisauslöser. –

Für die Leute, die von angular js kommen, könnte dies den Trick 'google.maps.event.trigger ($ scope.map.control.getGMap(), 'resize');' –

Dies sollte die richtige Antwort sein. – LanceLafontaine

document.getElementById('map_canvas').style.display = 'none';

Dies funktionierte gut für mich - weiß nicht, ob das ist, weil ich die Leinwand nicht das enthält, div bin versteckt .... arbeitet in IE, Firefox und Chrome in Ordnung. Natürlich können Sie Ihren Container ausblenden, sobald der Kartenbereich ausgeblendet ist.

Quelle

2012-03-08 12:50:43

.map_container {display: none;}

$('.show_hide').click(function(){ 
    $('.map_container').toggle({ 
     complete:function(){ 
      google.maps.event.trigger(map, 'resize'); 
     }, 
     duration:'slow' 
    }); 
})

Quelle

2013-02-26 14:42:54

Ganz einfach ... durch die Zeit, initialisieren Sie die Karte alle seine äußeren divs müssen bereits angezeigt werden.

So initialisieren nur die Karte am Ende:

setTimeout(function(){ 
    $mapsOuterDiv.slideToggle(700); 
    setTimeout(function(){ 
     initializeGoogleMap(); 
    },300); 
},300);

Quelle

2014-08-20 21:58:11 kaleazy

Auch habe ich eine andere Lösung gefunden. Manchmal müssen Sie auf Google Maps-Objekt aufrufen und Karte wird gezwungen, die Größe zu ändern.

// gmaps - instance of particular map ... 
gmaps.refresh()

Quelle

2014-10-30 14:23:14 testCoder

Initialisieren Sie einfach die Karte, wenn Sie sie anzeigen möchten. Ich hatte das gleiche Problem und habe es auf diese Weise gelöst.

Entfernen Sie diese Zeile:

google.maps.event.addDomListener(window, 'load', initialize);

und ändern Sie die toggleDiv Skript auf diese Weise:

function toggleDiv1(viewmap){ 
    if(document.getElementById(viewmap).style.display == 'block'){ 
     document.getElementById(viewmap).style.display = 'none'; 
    }else{ 
     document.getElementById(viewmap).style.display = 'block'; 
     initialize(); 
    } 
} 
function toggleDiv2(hidemap){ 
    if(document.getElementById(hidemap).style.display == 'none'){ 
     document.getElementById(hidemap).style.display = 'block'; 
    }else{ 
     document.getElementById(hidemap).style.display = 'none'; 
    } 
}

Quelle

2015-01-23 22:56:04 user2559310

** Best behoben Ansatz**. Lädt nur, wenn die Karte angezeigt wird. –

Allgemeinen google.maps.event.trigger (map, 'Resize') wird aktualisieren die zuordnen und somit den Code nach jeder Anzeige anhängen, da der vorherige Zustand der Anzeige "keine" ist:

document.getElementById(hidemap).style.display = 'block'; 
    Generally google.maps.event.trigger(map, 'resize')

Quelle

2016-11-21 04:19:24

Google Maps Anzeige: Keine Problem

Antwort

Verwandte Themen