Wie kann ich ein popup-Google-Karte angezeigt werden, wenn der Benutzer mit der Maus über eine Adresse?

Möchte ich meine Website so, dass, wenn ein Benutzer mit der Maus über eine Adresse, eine kleine google-Karte der Adresse erscheint. Ich habe das Lesen durch die Google Maps-API-Dokumentation, aber ich habe eine harte Zeit der Suche eine einfache Möglichkeit dies umzusetzen. Es scheint, ich habe mit dem, was google ruft "geocoding" zu finden, die Längen-und Breitengrade auf der Grundlage der Adresse... Das ist der test-Seite habe ich bisher:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0px; padding: 0px }
          #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            var geocoder;
            var map;

            function codeAddress(address) {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                      zoom: 20,
                      center: results[0].geometry.location,
                      mapTypeId: google.maps.MapTypeId.SATELLITE
                    }
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
            }
        </script>
    </head>
<body>
    <div onMouseOver="codeAddress('1405 Harrison Street, Oakland, CA')">
        1405 Harrison Street, Oakland, CA
    </div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Dies bewirkt jedoch, dass die Karte zu zeigen, bis in der map_canvas div... Was ich wirklich will ist die Karte wie ein kleines popup, wie eine Art tooltip. Wie kann ich dies erreichen? Auch, wie kann ich es so einrichten, dass, wenn der Benutzer die Mouse-out, die Karte verschwindet?

Ich bin mit html und javascript so weit, und meine website ist in coldfusion.

InformationsquelleAutor froadie | 2011-03-24

Was Sie tun müssen, ist legen Sie die CSS für Ihre map_canvas div display:none. Auf diese Weise werden Sie haben vollständige Kontrolle über, wenn er tatsächlich gezeigt, durch die Verwendung von javascript. Sobald Sie das getan haben, es ist nur eine Frage der Ausrichtung der hover Veranstaltung für Ihre mouseover div. Sie werden wahrscheinlich wollen, um etwas wie das hier tun. Stellen Sie zunächst sicher, dass Sie geben Sie Ihre mouseover div eine onmouseout Veranstaltung

<div onMouseOver="codeAddress('1405 ...)" onMouseOut="hideMap()" >

</div>

Nächsten, Ziel und zeigen die div innerhalb Ihrer codeAddress Funktion so gerne.

function codeAddress(address) {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                      zoom: 20,
                      center: results[0].geometry.location,
                      mapTypeId: google.maps.MapTypeId.SATELLITE
                    }
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                     //here's where you would want to show your map
                     //just use javascript to set the display style to block
                    document.getElementById("map_canvas").style.display = 'block'

                  } else {
                    ... [code here]
                  }
                });
            }

Klar, Sie wollen auch zum ausblenden der Karte beim verlassen des div, so dass Ihre hideMap Funktion wird genau das tun.

function hideMap(){
 document.getElementById('map_canvas').style.display = 'none'
}

Weiß ich dies nicht umsetzen, Ihr ideal 'tooltip' - Szenario, aber ich hoffe, dies kann Ihnen den Einstieg. Haben Sie einen Blick auf dieser tooltip-Bibliothek. Ich habe es vor, und es macht es sehr einfach auf beliebige div-Element in einem tooltip angezeigt. Von dort aus sollten Sie golden. Happy coding!

InformationsquelleAutor Hacknightly

0

Stil der map_canvas einen Rahmen und wirken wie ein separates Fenster.

Auf der mouseover-Effekt ändern, der map_canvas(iframe oder was auch immer Sie möchten, kleben Sie es in) x,y entsprechen den mouseOver-x,y.

Set mapcanvas.Stil.display = "none"; auf mouseout

InformationsquelleAutor owook

Könnten Sie erreichen, ein popup-Fenster bei mouseover ganz einfach mit einigen jQuery.

Schauen Sie sich das folgende jQuery-Funktion:

http://api.jquery.com/mouseover/

Idee, dass Sie so etwas wie:

<div id="adress1" style="position:relative;">
    72 MacDougal Street, New York, United States
    <div id="map_for_adress1" style="display:none; position:absolute; top:0; left:0;">
        <!--GOOGLE MAP, DIV for DATA or EMBED CODE-->
    </div>
</div>

<script type="text/javascript">
$("#adress1").mouseover(function() {

    //When mouse is over...
    $('#map_for_adress1').show(0);

  }).mouseout(function(){

    //When mouse is not over...
    $('#map_for_adress1').hide(0);

  });
</script>

Auch, warum Sie benötigen, um die volle Google-Maps-API zum anzeigen einer Karte der Adresse? Warum nicht einfach die embed-Funktion?

Etwas wie:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=72 MacDougal Street, New York, United States&iwloc=A&output=embed&ie=UTF8"></iframe>

InformationsquelleAutor jamietelin

Gebäude auf Banx Lösung, modifizierte ich das Skript wie folgt:

(function(){
  var geocoder = new google.maps.Geocoder(),
      map = window.map = new google.maps.Map(document.getElementById("map_canvas"), {
          zoom: 16,
          center: new google.maps.LatLng(38.92, -77.06),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }),
      canvas = $("#map_canvas");

  $(".address").hover(function(){
    canvas.css({
      top: $(this).position().top,
      left: $(this).position().left
    }).show();
    geocoder.geocode( { 'address': $(this).text() }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          map.fitBounds(results[0].geometry.bounds);
      } else {
        //alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }, function(){
    canvas.hide();
  });
})();

Ich verwendet jQuery für den Umgang mit einer DOM-Zeug da, aber es sollte sehr einfach zu ändern, um was auch immer-Bibliothek (oder nicht), die Sie verwenden. Der wesentliche Unterschied zu Banx code es nutzt die map und geocoder Objekte anstelle der Neuerstellung es jedes mal. Auch ich bin mit der bounds aus dem Ergebnis statt location da es wünschenswerter ist, meiner Meinung nach.

InformationsquelleAutor Haochi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.