CODEWITHSUNDEEP
cssgoogle-mapsfirefoxgoogle-maps-api-3css-position
Marrix
Marrix

Reputation: 343

Position relative in firefox causing problems with google-map-markers clickable area

The clickable area around a google-map-marker is shifting/misplaced when text (or other content) is added before the map-div. It is working fine in chrome, ie etc. - only firefox seems to cause this problem (as far as I can see). When - in web-console - changing map-div's elementstyle from 'relative' to 'static' the problem is gone.

The code below is borrowed from googles map-examples - if I uncomment the lorem-text the map-markers clickable area is moving/misplaced. Any suggestions on how to solve the problem (if there is a problem - I might have missed something obvious):

<!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(21, 21),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(10, 10)  
            };

            var shape = {
                coords: [0,0, 0,21, 21,21, 21,0],
                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>

UPDATE

This bug was handled in https://issuetracker.google.com/issues/35826867 and fixed in version 3.21 of API in September 2015.

Upvotes: 1

Views: 551

Answers (2)

user1320624
user1320624

Reputation: 1

Specifying the version as v=3 ensure that you have the most recent release version. The current release version is 3.20. The problem arises with the experimental version, currently 3.21, which is the default default version if you do not explicitly specify a version using the v parameter.

Upvotes: 0

jkirk
jkirk

Reputation: 26

Try changing the js src from v=3.exp to v=3

Upvotes: 1

Related Questions