Google Map loaded in Upper Left corner

GoogleCodeExporter commented 9 years ago

hii 

I have used Google Maps API V3 version with MarkerWithLabel js api. All the 
functionality works fine in browsers like Mozilla Firefox, Google Chrome, Apple 
Safari except some of the Internet Explorer Versions (IE 9 & IE 7).  
In Internet Explorer 9 and Internet Explorer 7 the map always loaded in the 
upper left corner.
I tried with triggering resize event but still fails.
Kindly find following screen shots which best describes the issue. 

Kindly help me to resolve the issue.

Regards 
Swapnil Patil

Original issue reported on code.google.com by swapnil1...@gmail.com on 23 Nov 2011 at 6:17

Attachments:

GoogleCodeExporter commented 9 years ago

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Hello World</title>
    <style type="text/css">
        .labelss
        {
            font-family: Arial;
            font-size: 13px;
            color: black;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
            width: 40px;
            height: 42px;
            padding-top: 8px;
            background: url('images/icon_rateg2.png') no-repeat;
        }
    </style>
    <!--[if IE]>
    <style>
    .labelss
    {
        font-family: Arial;
        font-size: 13px;
        color: black;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;              
        width:40px;
        height:42px;
        padding-top:8px;       
        background:url('images/icon_rateg2.png') no-repeat;       
    }

    </style>
<![endIF]-->

</head>
<body>
    <div id="gmap_divcanvas" style="display: block; height: 600px; width: 670px; border: 1px solid #cdcdcd;">
    </div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
    <script type="text/javascript" src="markerwithlabel.js"></script>
    <script language="javascript" type="text/javascript">

        var lati = '+40.728941+40.727909+40.7381935+40.7380939+40.740042+40.741509+40.731885+40.737204+40.737705+40.7382076+40.7378566+40.734283+40.74026+40.7355596+40.735591+40.735661+40.7356994+40.739202+40.7404838+40.741882+40.74368+40.736073+40.737263+40.737171+40.738177+40.739055+40.744095+40.7394616+40.739754+40.748304+40.750827+40.748513+40.753415+40.750205+40.7520471+40.7508281+40.750971+40.755439+40.754453+40.7545684+40.759015+40.7581306';
        var longi = '+-74.008147+-74.008648+-74.0091527+-74.009276+-74.003077+-74.004537+-73.991976+-73.996162+-73.995512+-73.9967062+-73.9939562999999+-73.986472+-73.992381+-73.9887196+-73.984978+-73.983162+-73.9830022+-73.988092+-73.9887549999999+-73.992442+-73.994755+-73.980002+-73.981279+-73.979949+-73.980866+-73.979648+-73.991407+-73.979048+-73.979144+-73.994956+-73.997815+-73.986913+-73.995622+-73.986732+-73.989095+-73.9862036+-73.986558+-73.99203+-73.987224+-73.9874118999999+-73.995983+-73.9918942';
        var map
        var centerlnglong;
        var address;
        var addlatlng;
        var latLng;
        var ratepos;
        var infowindow;
        latLng = new google.maps.LatLng('40.73662', '-74.001106');

        map = new google.maps.Map(document.getElementById('gmap_divcanvas'), {
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable: true,
            minZoom: 13,
            maxZoom: 25,
            zoom: 15,
            scrollwheel: false
        });

        (function () {
            google.maps.Map.prototype.markers = new Array();
            google.maps.Map.prototype.clearMarkers = function () {
                if (infowindow) {
                    infowindow.close();
                }
                for (var i = 0; i < this.markers.length; i++) {
                    this.markers[i].set_map(null);
                }
            };
        })();

        //setup map starts
        function setupmap(lats, longs) {
            infowindow = new google.maps.InfoWindow();
            var marker, i;
            ratepos = new google.maps.Point(23, 52);
            rateimage = "labelss";
            marker = new MarkerWithLabel({ position: new google.maps.LatLng(lats, longs),
                map: map,
                draggable: false,
                title: 'Title',
                icon: 'images/none.png',
                labelContent: '123',
                labelAnchor: ratepos,
                labelClass: rateimage, // the CSS class for the label
                labelStyle: { opacity: 1 },
                animation: google.maps.Animation.DROP
            });
            // Set up Infowindow text
            var iwtext = 'Hello World';
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(iwtext);
                    map.clearMarkers();
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
        // Split the array and call setupmap
        var arrlat = new Array();
        var arrlong = new Array();

        for (var i = 0; i <= 10; i++) {
            arrlat = lati.split("+");
            arrlong = longi.split("+");
            setupmap(arrlat[i], arrlong[i]);
        }
        // resize the google map for IE 7
        google.maps.event.trigger(map, 'resize');
        this.map.setZoom(this.map.getZoom() - 1);
        this.map.setZoom(this.map.getZoom() + 1);

    </script>
</body>
</html>

Original comment by swapnil1...@gmail.com on 25 Nov 2011 at 7:10

GoogleCodeExporter commented 9 years ago

found any solution for this issue?

Original comment by sja...@irsavideo.com on 31 Mar 2014 at 1:56

ghamster2 / google-maps-utility-library-v3

Google Map loaded in Upper Left corner #143