CODEWITHSUNDEEP
javascripthtmlinternet-explorergoogle-mapscanvas
maurix suarez
maurix suarez

Reputation: 129

Google map polygon not rendering correctly in IE (9 and 10)

I hope this question is not confusing or too complex. but here we go: I'm creating a custom google map that renders some US states as polygon overlays with the "google.map.Polygon' method. Everything seems to work in all browsers as shown in the picture below, Polygons in Chrome,Firefox,Safari and Opera

When I say "all browsers", they are Chrome,Firefox,Safari and Opera. But when it comes to IE (9-10) the Polygon shapes seem to brake in half and also shrinks as shown here:

Polygons in IE (9-10)

Like I said before, I'm using the google polygon method :

 var obj = new google.maps.Polygon({
    paths: coords,
    strokeColor: sColor,
    strokeOpacity: sOpacity,
    strokeWeight: sWeight,
    fillColor: fColor,
    fillOpacity: fOpacity,
    lat:cLat,
    lng:cLng,
    north_bound:cNorthBound,
    south_bound:cSouthBound,
    name:name
    });

and the shape coordinates points come from a XML file like this : //I'm just placing the code to give a better idea how the whole thing is put together

<state name="Louisiana" strokeColor="#D6D1CB" strokeOpacity="1" strokeWeight="2" fillColor="#004E98" fillOpacity="1" lat="31.2448234" lng="-92.1450245" north_bound="33.019544,-88.8162401" south_bound="28.9254296,-94.043352">
   <point lat="33.0225" lng="-94.0430"/>
   <point lat="33.0179" lng="-93.0048"/>
   <point lat="33.0087" lng="-91.1646"/>
   <point lat="32.9269" lng="-91.2209"/>
   <point lat="32.8773" lng="-91.1220"/>
   ..... etc

The problem is not passing the data or creating the shape, but rather the way it renders in IE 9&10. I have googled and tried several alternatives for days on how to fix this issue, but none of them worked, this is what I have tried so far:

If I click on the IE's compatibility button

IE compatibility button

the code changes from:

standard IE source code rendering

to:

compatibility source code

Which is the view for compatibility for old browsers, so I suppose the google map renders differently ( without the canvas ) and then it shows the polygons correctly but brakes the rest of the html5 element and css in the page. Besides this is controlled by the user, not the site.

enter image description here like you can see in the in the picture above.

So my questions (possible solutions/thoughts) are:

Thanks in advance for any input/help :)

Upvotes: 2

Views: 1215

Answers (2)

maurix suarez
maurix suarez

Reputation: 129

I did take the whole thing apart as Michael Geary suggested, and it turns out that for google maps in IE the css inheritance might affect how the Polygon is render on screen. The individual polygon layers where inheriting the css "height:auto" from one of it's parents and it seems that IE9&10 are very delicate with this. So the answer was removing "height:auto" from the css file in the parent element (container box).

Upvotes: 4

Michael Geary
Michael Geary

Reputation: 28870

I'm afraid you're barking up all the wrong trees. But I guess you already know that! :-)

Here, try this simple example:

https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

It works fine in IE9 and IE10 without any of the tricks you tried, right?

That's your existence proof: it's possible to get the result you want with no fancy effort.

So the problem is somewhere in the difference between your page and that simple example. The solution won't be to layer on more goop, it will be to find what is different in your page. It's most likely something in your CSS, but it's impossible to guess without seeing a test page.

One approach I can guarantee will work: gradually turn your page into that test page. Take things out of your page, one by one, and change things that are different from the test page, working your way closer to the test page. Eventually, one change you make will get it to work correctly, and that's what you need to fix.

The reason I can guarantee this approach is that if you keep changing your page until it's more like the test page, eventually it will be the test page, and we already know that page works.

This approach is tedious, but it will absolutely let you find the problem.

Obviously you should back up your code before each change, so you have a trail and can isolate the one change that fixes it. The best way to do this is to use a DVCS such as Mercurial or Git. You can create a temporary repository and commit each change as you go, making it easy to go back to any change, compare revisions, etc.

Upvotes: 2

Related Questions