Avatar billede marrix Juniormester
10. juli 2015 - 12:26 Der er 1 løsning

Firefox - Googlemap problem

Hej

Jeg arbejder med et google-map med markers/markører, som er tilføjet en click- og mouseover-event. Det virker for så vidt fint. Men i Firefox sker der noget mærkeligt: Hvis der er tekst (eller andet indhold) over kortet/map'et, så forskubber markørernes klikbare område sig (så det ser ud som om, at de ikke er klikbare - men eventen er bare flyttet et sted ind på kortet). Hvis jeg fjerner/udkommenterer tekst/indholdet over kortet, så er det klikbare område tilbage på markøren.

Googlemap'et bliver tilføjet noget element-styling bl.a. position relative - hvis jeg i webkonsollen ændrer relative til static, så virker markørerne, som de skal (men kortet flytter sig selvsagt - så det er ikke en løsning/forklaring).

Tjek evt. selv med koden herunder, som jeg har lånt fra googles egen side om markører (så koden skulle være god nok) - hvis mumleteksten er over kortet, så ligner det, at markørerne ikke reagerer på mouseover/hover (det klikbare område har forskubbet sig). Hvis mumleteksten fjernes/udkommenteres, er der pointer ved hover/mouseover på markøren. Og i Chrome, IE m.fl. virker begge dele helt uden problemer - kun Firefox driller. Hvorfor? Hvad kan jeg gøre?

Kode til test (bare en plain html-fil):

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex icons</title>
    <style>
        html, body, #map-canvas
        {
            height: 800px;
            width: 800px;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(-33.9, 151.2)
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                                          mapOptions);

            setMarkers(map, beaches);
        }

        var beaches = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.923036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 151.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 1]
        ];

        function setMarkers(map, locations) {
            var image = {
                url: 'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/blue_dot.png',
                size: new google.maps.Size(18, 18),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(9, 9) 
            };

            var shape = {
                coords: [1, 1, 1, 18, 18, 18, 18, 1],
                type: 'poly'
            };
            for (var i = 0; i < locations.length; i++) {
                var beach = locations[i];
                var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    shape: shape,
                    title: beach[0]
                });
            }
        }

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

    </script>
</head>
<body>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </p>

    <div id="map-canvas"></div>

</body>
</html>
Avatar billede marrix Juniormester
25. juli 2015 - 00:32 #1
Tilsyneladende hjalp det at ændre linket til map-js til følgende:

https://maps.googleapis.com/maps/api/js?v=3&signed_in=true
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
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

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