Avatar billede mcclaud Nybegynder
10. juli 2012 - 21:25 Der er 14 kommentarer og
1 løsning

Talebobbel ved hover over

Hej alle eksperter

Jeg kunne rigtig godt tænke mig, at der viser sig en tekst, når man hover over knappenålen på kortet på denne side:

side: http://www.klarkommunikation.net/kontakt.htm
script: http://www.klarkommunikation.net/scripts/map/map.js

...og jeg vil meget gerne kunne designe teksten via css.

:o) mcclaud
Avatar billede DeeDawg Nybegynder
10. juli 2012 - 23:01 #1
Du kunne evt. tage et kig på dette. :)
Avatar billede olsensweb.dk Ekspert
11. juli 2012 - 00:05 #2
du kunne også lave en event.addListener og kigge på infowindow
google gmaps infowindow
http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/single-infowindow/single-infowindow.html?r=262

i css
.infobox{
    background-color: #FF0000;
}


map.js
function initialize() {
    var map = document.getElementById("map_canvas");
        map.style.display = "";
        map.style.width = (parseInt(screen.width) + 100) + "px";
        map.style.height = (parseInt(screen.height) + 100) + "px";
    var myLatlng = new google.maps.LatLng(55.66665, 12.55937);
    var myOptions = {
        zoom: 17,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var image = 'grafik/diverse/pin.png';
    var myLatLng = new google.maps.LatLng(55.66665, 12.55937);   
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,       
        icon: image
    });
    var myWindowOptions = {
        content: '<div class ="infobox"> Her Bor Vi <br/> jeg må hellere lave et linje skift, så vi kan fylde boxen up og evt lave den størrer men hvis den kan klippe linjen over</div>'
    };
    var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);
    google.maps.event.addListener(marker, 'mouseover', function() {
        myInfoWindow.open(map,marker);
    });   
    google.maps.event.addListener(marker, 'mouseout', function() {
        myInfoWindow.close();
    });

}
Avatar billede olsensweb.dk Ekspert
11. juli 2012 - 00:15 #3
Avatar billede mcclaud Nybegynder
11. juli 2012 - 15:13 #4
Hej olebole

Mange tak for scriptet. Det er bare så fint. Er det muligt at det lille kryds i øverste højre hjørne af taleboblen ikke bliver vist? Og er det muligt, at jeg kan komme til at beslutte den indre margin fra teksten og til kanten af taleboblen?

Hvis det ikke er det muligt, må du endelig poste et svar, så kommer jeg med glæde med points.

:o) mcclaud
Avatar billede olebole Juniormester
11. juli 2012 - 15:39 #5
<ole>

Selvtak, men lige denne tråd kan jeg nu ikke tillade mig at score credit på .... selvom Ole og Olsen om ikke andet har et vist lingvistisk slægtskab  *D

/mvh
</bole>
Avatar billede mcclaud Nybegynder
11. juli 2012 - 15:43 #6
Undskyld, undskyld... Jeg mente selvfølgelig ronols. Jeg beklager meget, at jeg miksede jeres navne.

:o) mcclaud
Avatar billede mcclaud Nybegynder
11. juli 2012 - 16:25 #7
Hej ronols og DeeDawg

Jeg har hittet ud af det med den indre margin. Nu håber jeg på, at I måske kan hjælpe mig med at fjerne krydset i øverste højre hjørne - og hvis ikke så kan jeg måske selv vælge, hvordan det skal se ud?

:o) mcclaud
Avatar billede olebole Juniormester
11. juli 2012 - 16:28 #8
*LoL* ronols har jeg absolut ikke problemer med at blive forvekslet med ... men jeg kan sagtens komme i tanker om brugere, som ville indlede en middelsvær, bloddrivende jihad for langt mindre end det at blive forvekslet med mig!  *D
Avatar billede olebole Juniormester
11. juli 2012 - 17:06 #9
Du bør nok lave dit eget extInfoWindow - og der er eksempler her
Avatar billede mcclaud Nybegynder
11. juli 2012 - 21:52 #10
Kære alle sammen

Jeg har prøvet i lang tid at finde ud af, hvordan man fjerner det lille kryds oppe i det øverste højre hjørne, og det kan jeg ikke hitte ud af. Det er alt for langhåret for mig.  :o(

Er der nogen, der kan hjælpe med en stump kode, som jeg kan tilføje til det suveræne script, som ronols lavede til mig i #2,
så krydset forsvinder? Alternativt sætter jeg gerne mit eget jpg/gif ind i stedet for InfoWindows-standarden. Jeg kan i da fald blot lave et helt hvidt felt, som ikke kan ses.

Kan noget af det lade sig gøre?

:o) mcclaud
Avatar billede olebole Juniormester
11. juli 2012 - 22:15 #11
#9 viser, hvordan du laver din helt egen popup dialog - uden kryds. Der er endda eksempler  =)
Avatar billede mcclaud Nybegynder
11. juli 2012 - 22:47 #12
Hmmm, ja jeg kan godt se, at #9 tilbyder det, men jeg er meget tilfreds med google-udgaven og hoover over funktionen, som scriptet i #2. Så jeg beholder den - med kryds...

Mange tak alle sammen for bidrag. Hvis du ronols poster et svar, så er der points på vej.

:o) mcclaud
Avatar billede olsensweb.dk Ekspert
12. juli 2012 - 19:31 #13
du får et svar her

der er ikke grund til at bruge tid på at finde en måde at fjerne X fra dit infowindow https://groups.google.com/forum/?fromgroups#!topic/google-maps-js-api-v3/uIbU0Xhd_V4
så du skal selv lave en nyt infowindow

du kunne overveje det link som olebole skrev i #9, men være opmærksom på det er til ver 2
ver 3 ligger her http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/

hvis du kigger på linket fra #1 skal du i infobox.js  linje 96 fjerne
this.closeBoxURL_ = opt_opts.closeBoxURL || "http://www.google.com/intl/en_us/mapfiles/close.gif";
og lave få ændringer i initalicerings function
kig på infobox-basic.html (første eks)

har lige leget lidt med det
demo http://experten.olsensweb.dk/965824/kontakt.html (magin mangler)
komplet source http://experten.olsensweb.dk/965824/965824.zip
Avatar billede olebole Juniormester
12. juli 2012 - 20:45 #14
Sorry! Det var et gammelt link blandt mine favoritter. I min alder synes alt zq at vise sig at være ældre, end man lige troede  :D
Avatar billede mcclaud Nybegynder
12. juli 2012 - 23:24 #15
Hej ronols

Mange tak for dit store arbejde... Og tak til DeeDawg og olebole for jeres medvirken.

Ha' en rigtig go' sommer.

:o) mcclaud
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester