2

I hope someone will be able to help me:

My situation:

I am currently working with google Maps, and I did some markers to represent a Trip. Now the Icons of these Markers can be easy changed to be an image you chose and define as follows:

var marker = new google.maps.Marker({
    label: name[0],
    title: name,
    draggable: true,
    position: { lat: lat, lng: lng },
    icon: this._imgNormal,
    map: _map,
    customInfo: nearHotel.ID,
    descr: nearHotel.descr
});

But now I need to exchange those Icons to be SVG instead of PNGs.

What I have tried

First I will explain the reason I am not using this simple way and then using it in the marker:

var icon = {
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

Its because I want to end up making more complex SVGs, and as far as I know this method wont allow me to for example make a flower inside of several rectangles.

I have made some research and found a way to do it on this website:
Create Google Maps Markers with Inline SVG

My Problem and Question

In Chrome and Firefox this would work, but not in IE... I started to look up why it wouldnt work and it said that it has to do something with the encodeURIComponent user, which would not work the same way in IE and that is probably why it is not supported.

Does anyone know if there is some way to make this method work in IE as well? Or is there a complete different way to use complex SVGs which would work on any browser?

I would be very glad to hear your answers, I thank you in advance

Example of a SVG I create in Illustrator

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="85.04px" height="85.04px" viewBox="0 0 85.04 85.04" enable-background="new 0 0 85.04 85.04" xml:space="preserve">
<g>
 <g>
  <circle fill="#706F6F" cx="42.466" cy="42.143" r="20.582"/>
 </g>
 <g>
  <g>
   <circle fill="#FFFFFF" cx="42.466" cy="42.143" r="18.5"/>
  </g>
  <circle fill="#CE1222" cx="42.466" cy="42.143" r="13.5"/>
 </g>
</g>
</svg>
Jessica
  • 21
  • 5
  • 1
    This is a common problem with IE: http://stackoverflow.com/questions/8926285/svg-browser-support. I had an similar purpose an I wrote function to detect if it´s IE and then deliver images as .png – el solo lobo Apr 13 '16 at 11:18
  • I see, so you used that as a workaround. Im still gonna wait and see if there are other possibilities but thanks for the cool idea @IntercoolerTurbo I might consider doing so. – Jessica Apr 13 '16 at 11:22
  • 1
    http://caniuse.com/#search=svg - What version(s) of IE do you want/need to target? IE 9 and above should be fine. IE 8 is like 0.77% of global browser usage... Not even mentioning earlier versions. – MrUpsidown Apr 13 '16 at 13:50
  • I can run this example in IE9 perfectly fine: http://jsfiddle.net/upsidown/eLcNq/ – MrUpsidown Apr 13 '16 at 13:52
  • @MrUpsidown I was saying in my question that the example in the Link I provide doesnt work in IE, not that the first sample of code wouldnt work. Adding a path to an icon works perfectly fine, but is there a way to do it with the SVGs I am using? I edited my question and added a snippet with an example of an SVG I use. May it be possible to combine the diferent paths it contains to make it work as an Icon as well? Thank you for your help and effort – Jessica Apr 13 '16 at 15:26
  • Sorry but what exactly are you trying to do? Combine the 2 paths? You can't have a SVG symbol with two colors... At least not in a standard way. You could eventually create 2 markers but that sounds like a strange idea. And as a side note, that icon is against Facebook brand guidelines... Just saying... – MrUpsidown Apr 13 '16 at 15:36
  • Or... you need to save your SVG file and provide it as a SVG file (not SVG path). But I didn't test that in IE... Check my answer [here](http://stackoverflow.com/questions/24413766/how-to-use-svg-markers-in-google-maps-api-v3/24426400#24426400) if you didn't do already, especially the **Edit 2** part. – MrUpsidown Apr 13 '16 at 15:56
  • @MrUpsidown Yes, I want to show a COMPLEX SVG as mentioned in my question. That is the reason why I clarified that the first code stated in my question wont be an option for me. In my research I have found the same post you are suggesting in the second Link and I have seen the jsFiddles. But that I have tried already, because again, as mentioned in my question I have used PNGs first, so evidently I have tried using SVGs in the URL as well, but it doesnt work on IE, something you may not have discovered yet since you state in your comment that you havent tested it yet. – Jessica Apr 13 '16 at 18:51
  • @MrUpsidown but I thank you anyways for trying to help me, I appreciate that :) Hopefully a good answer will be found so that the information will be available for everyone. And I have changed the SVG example in my Question, as you suggested, because of possibly violating the Facebook brand guidelines, just saying – Jessica Apr 13 '16 at 18:54
  • *It doesn't work on IE* which version of IE? Have just tried [my example](http://jsfiddle.net/upsidown/r1mm0hft/) with a complex SVG file (.svg) and it works fine on both IE9 and IE10. – MrUpsidown Apr 14 '16 at 07:40
  • Sorry I havent specified the IE version. It doesnt work on IE 11 – Jessica Apr 14 '16 at 09:08
  • By the way, I have also found others having the same problem with IE 11 but it seems as if its just not supported. What do you think? http://stackoverflow.com/questions/20414387/google-maps-svg-marker-doesnt-display-on-ie-11 – Jessica Apr 14 '16 at 12:03

1 Answers1

-1

I tried your code on SVG file and it works properly for me on Chrome and IE as well, anyway I experienced some problems with SVG on IE and I realized that I have to assign the width and height with pixles.

for example you wrote:

width="35"
height="35"

but for IE you have to write them like that:

width="35px"
height="35px"

That's based on what I know about SVG and using them with IE, Hope it helps :)

Ahmed Alaa
  • 124
  • 7
  • 1
    I wish I could enter a single word as a comment. In this case it would be: No. – MrUpsidown Apr 13 '16 at 15:58
  • @AhmedAlaa I dont think this is the answer, but I appreciate your efforts. Thank you – Jessica Apr 13 '16 at 18:58
  • I think I didn't understand your question right, sorry for that and I hope you found the answer which you were seeking for :) – Ahmed Alaa Apr 13 '16 at 19:16
  • Sorry for that, could you maybe point out the part you didnt understand about my question? That way I am going to be able to improve it. Thanks for the feedback :) – Jessica Apr 14 '16 at 06:59
  • I usually draw SVG icons using illustrator and export them to SVG to be able to use them with my responsive website or mobile apps, and I realized that all animations or anything related to SVGs works fine cross all browsers except IE, I searched alot about the reason and I found that IE can't understand numbers without mentioning the unite like what I said regarding the width and height ... but it seems that you are targeting something else beyond that which I didn't understand :) – Ahmed Alaa Apr 14 '16 at 17:02