Menu
Can I use my converted image.svg as google map icon. I was converting my png image to svg and I want to use this like google map symbol that can be rotated. I already tried to use the google map symbol but I want to have an icon like car, man, etc... That's why I converted my some png files to svg, just like this example site what does he use for these http://www.goprotravelling.com/
924
There are three steps to creating a Google map with a marker on your web page: Create an HTML page. Add a map with a marker. Get an API key.
You can render your icon using the SVG Path notation.
See Google documentation for more information.
Here is a basic example:
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 } var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon }); Here is a working example on how to display and scale a marker SVG icon:
JSFiddle demo
Edit:
Another example here with a complex icon:
JSFiddle demo
Edit 2:
And here is how you can have a SVG file as an icon:
JSFiddle demo
124
If you need a full svg not only a path and you want it to be modifiable on client side (e.g. change text, hide details, ...) you can use an alternative data 'URL' with included svg:
var svg = '<svg width="400" height="110"><rect width="300" height="100" /></svg>'; icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg); JavaScript (Firefox) btoa() is used to get the base64 encoding from the SVG text. Your may also use http://dopiaza.org/tools/datauri/index.php to generate base data URLs.
Here is a full example jsfiddle:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); var template = [ '<?xml version="1.0"?>', '<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">', '<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>', '</svg>' ].join('\n'); var svg = template.replace('{{ color }}', '#800'); var docMarker = new google.maps.Marker({ position: new google.maps.LatLng(-33.92, 151.25), map: map, title: 'Dynamic SVG Marker', icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg), scaledSize: new google.maps.Size(20, 20) }, optimized: false }); var docMarker = new google.maps.Marker({ position: new google.maps.LatLng(-33.95, 151.25), map: map, title: 'Dynamic SVG Marker', icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg), scaledSize: new google.maps.Size(20, 20) }, optimized: false }); </script> </body> </html> Additional Information can be found here.
Avoid base64 encoding:
In order to avoid base64 encoding you can replace 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) with 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)
This should work with modern browsers down to IE9. The advantage is that encodeURIComponent is a default js function and available in all modern browsers. You might also get smaller links but you need to test this and consider to use ' instead of " in your svg.
Also see Optimizing SVGs in data URIs for additional info.
IE support: In order to support SVG Markers in IE one needs two small adaptions as described here: SVG Markers in IE. I updated the example code to support IE.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
