CODEWITHSUNDEEP
iosmacosbing-mapsvirtual-earth
Ankit Ahuja
Ankit Ahuja

Reputation: 73

map loads wrong only in iOS and OSX, not Windows

I am working with Microsoft.Maps, developing in Visual Studio. After publishing, it works great in all my windows browsers, but looks like this in both iOS Safari/Chrome and OSX Safari:

https://i.sstatic.net/7jtWr.png

When scrolling, or zooming, the same left side of the screen shows the same, while the right side of the screen moves to another part of the world, completely unrelated to the directions I try to move in. Not to mention, the pin moves too!

As a note, I tested this on Friday and had 0 complications...something happened in the past 3 days and I have no idea if I can even fix it. 

    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery-bing-maps/jquery.ui.bmap.js"></script>
    <script type="text/javascript">
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                    {
                        credentials: "<redacted>",
                        mapTypeId: Microsoft.Maps.MapTypeId.road,
                        enableClickableLogo: false,
                        enableSearchLogo: false,
                        showCopyright: false,
                        showDashboard: false,
                        showMapTypeSelector: false,
                        showScalebar: false,
                        tileBuffer: 0,
                        zoom: 10
                    });

        window.onload = MapLoad;

    </script>


<body style="min-height:418px;">
    <div id="topofpage">
        <form id="Form2" runat="server">
        <!--#include virtual="header.html"-->
        </form>
        <div class="undersightslogo" style="max-width: 100%; overflow: hidden;">
            <div id="mapDiv" style="position: absolute; width: 100%; max-height: 100%; top: 42px;
                bottom: 0px; left:0px; min-height:372px;">
            </div>
            <div style="position: absolute;left: 7px; bottom:-54px;">
                <h6>
                    &copy; <companyname> <script type="text/javascript">document.write(new Date().getFullYear());</script>
                    </h6>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 34

Answers (2)

Ankit Ahuja
Ankit Ahuja

Reputation: 73

i found the solution in another forum. the problem is, safari is a very picky browser. as such, adding

text-align:left

to my map solved the problem. this problem presented itself through no different code of my own, or so i thought. but who really knows?

Upvotes: 0

rbrundritt
rbrundritt

Reputation: 17954

I wasn't able to reproduce this issue but did notice a couple of issues in your document. The first is that there is no MapLoad function and your code is trying to load the map before the page is loaded. The second is that you have a form tag but it is never closed.

Ensure that you have included a current Doctype and a UTF-8 metatag as that is one of the most common causes of rendering related issues. Try this Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and this Metatag:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

Upvotes: 0

Related Questions