Google map loaded in Upper left corner

Swapnil Prakash Patil

unread,

Nov 24, 2011, 3:29:16 AM11/24/11

to google-map...@googlegroups.com

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.
Browser caching and temporary files are also cleared still fails.
No firewall or network related issue. All the Google domains are accessible
Kindly find following screen shots which best describes the issue. 

Marker With Label API 

http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=131 

Kindly help me to resolve the issue.

Regards 
Swapnil Patil

Rossko

unread,

Nov 24, 2011, 7:57:07 PM11/24/11

to Google Maps JavaScript API v3

> Kindly help me to resolve the issue.

How? We cannot see what your webpage does. Please supply a link to
your problem map.

Swapnil Prakash Patil

unread,

Nov 25, 2011, 1:29:07 AM11/25/11

to google-map...@googlegroups.com

<!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>

</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>

geoco...@gmail.com

unread,

Nov 25, 2011, 9:42:36 AM11/25/11

to Google Maps JavaScript API v3

What about "link" was unclear? We can't debug pictures or code dumps.

-- Larry

Reply all

Reply to author

Forward