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/
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
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.
I know this post is a bit old, but I have seen so much bad information on this at SO that I could scream. So I just gotta throw my two cents in with a whole different approach that I know works, as I use it reliably on many maps. Besides that, I believe the OP wanted the ability to rotate the arrow marker around the map point as well, which is different than rotating the icon around it's own x,y axis which will change where the arrow marker points to on the map.
First, remember we are playing with Google maps and SVG, so we must accomodate the way in which Google deploys it's implementation of SVG for markers (or actually symbols). Google sets its anchor for the SVG marker image at 0,0 which IS NOT the upper left corner of the SVG viewBox. In order to get around this, you must draw your SVG image a bit differently to give Google what it wants... yes the answer is in the way you actually create the SVG path in your SVG editor (Illustrator, Inkscape, etc...).
The first step, is to get rid of the viewBox. This can be done by setting the viewBox in your XML to 0... that's right, just one zero instead of the usual four arguments for the viewBox. This turns the view box off (and yes, this is semantically correct). You will probably notice the size of your image jump immeadiately when you do this, and that is because the svg no longer has a base (the viewBox) to scale the image. So we create that reference directly, by setting the width and height to the actual number of pixels you wish your image to be in the XML editor of your SVG editor.
By setting the width and height of the svg image in the XML editor you create a baseline for scaling of the image, and this size becomes a value of 1 for the marker scale properties by default. You can see the advantage this has for dynamic scaling of the marker.
Now that you have your image sized, move the image until the part of the image you wish to have as the anchor is over the 0,0 coordinates of the svg editor. Once you have done this copy the value of the d attribute of the svg path. You will notice about half of the numbers are negative, which is the result of aligning your anchor point for the 0,0 of the image instead of the viewBox.
Using this technique will then let you rotate the marker correctly, around the lat and lng point on the map. This is the only reliable way to bind the point on the svg marker you want to the lat and long of the marker location.
I tried to make a JSFiddle for this, but there is some bug in there implementation, one of the reasons I am not so fond of reinterpreted code. So instead, I have included a fully self-contained example below that you can try out, adapt, and use as a reference. This is the same code I tried at JSFiddle that failed, yet it sails through Firebug without a whimper.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Drew G. Stimson, Sr. ( Epiphany )" />
<title>Create Draggable and Rotatable SVG Marker</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<style type="text/css">
#document_body {
margin:0;
border: 0;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
color: #f0f9f9;
text-align: center;
text-shadow: 1px 1px 1px #000;
background:#1f1f1f;
}
#map_canvas, #rotation_control {
margin: 1px;
border:1px solid #000;
background:#444;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#map_canvas {
width: 100%;
height: 360px;
}
#rotation_control {
width: auto;
padding:5px;
}
#rotation_value {
margin: 1px;
border:1px solid #999;
width: 60px;
padding:2px;
font-weight: bold;
color: #00cc00;
text-align: center;
background:#111;
border-radius: 4px;
}
</style>
<script type="text/javascript">
var map, arrow_marker, arrow_options;
var map_center = {lat:41.0, lng:-103.0};
var arrow_icon = {
path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#fefe99',
fillOpacity: 1,
rotation: 0,
scale: 1.0
};
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: map_center,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
});
arrow_options = {
position: map_center,
icon: arrow_icon,
clickable: false,
draggable: true,
crossOnDrag: true,
visible: true,
animation: 0,
title: 'I am a Draggable-Rotatable Marker!'
};
arrow_marker = new google.maps.Marker(arrow_options);
arrow_marker.setMap(map);
}
function setRotation(){
var heading = parseInt(document.getElementById('rotation_value').value);
if (isNaN(heading)) heading = 0;
if (heading < 0) heading = 359;
if (heading > 359) heading = 0;
arrow_icon.rotation = heading;
arrow_marker.setOptions({icon:arrow_icon});
document.getElementById('rotation_value').value = heading;
}
</script>
</head>
<body id="document_body" onload="init();">
<div id="rotation_control">
<small>Enter heading to rotate marker </small>
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
<small> Drag marker to place marker</small>
</div>
<div id="map_canvas"></div>
</body>
</html>
This is exactly what Google does for it's own few symbols available in the SYMBOL class of the Maps API, so if that doesn't convince you...
Anyway, I hope this will help you to correctly make and set up a SVG marker for your Google maps endevours.
Yes you can use an .svg file for the icon just like you can .png or another image file format. Just set the url of the icon to the directory where the .svg file is located. For example:
var icon = {
url: 'path/to/images/car.svg',
size: new google.maps.Size(sizeX, sizeY),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(sizeX/2, sizeY/2)
};
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: false,
icon: icon
});
Things are going better, right now you can use SVG files.
marker = new google.maps.Marker({
position: {lat: 36.720426, lng: -4.412573},
map: map,
draggable: true,
icon: "img/tree.svg"
});
As mentioned by others in this thread, don't forget to explicitly set the width and height attributes in the svg like so:
<svg id="some_id" data-name="some_name" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 26 42"
width="26px" height="42px">
if you don't do that no js manipulation can help you as gmaps will not have a frame of reference and always use a standard size.
(i know it has been mentioned in some comments, but they are easy to miss. This information helped me in various cases)
OK! I done this soon in my web,I try two ways to create the custom google map marker, this run code use canvg.js is the best compatibility for browser.the Commented-Out Code is not support IE11 urrently.
var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 59.325,
lng: 18.070
}
});
var markerOption = {
latitude: 59.327,
longitude: 18.067,
color: "#" + "000",
text: "ha"
};
marker = createMarker(markerOption);
marker.setMap(map);
marker.addListener('click', changeColorAndText);
};
function changeColorAndText() {
var iconTmpObj = createSvgIcon( "#c00", "ok" );
marker.setOptions( {
icon: iconTmpObj
} );
};
function createMarker(options) {
//IE MarkerShape has problem
var markerObj = new google.maps.Marker({
icon: createSvgIcon(options.color, options.text),
position: {
lat: parseFloat(options.latitude),
lng: parseFloat(options.longitude)
},
draggable: false,
visible: true,
zIndex: 10,
shape: {
coords: CustomShapeCoords,
type: 'poly'
}
});
return markerObj;
};
function createSvgIcon(color, text) {
var div = $("<div></div>");
var svg = $(
'<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
'<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
'<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
'<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
'</svg>'
);
div.append(svg);
var dd = $("<canvas height='50px' width='50px'></cancas>");
var svgHtml = div[0].innerHTML;
canvg(dd[0], svgHtml);
var imgSrc = dd[0].toDataURL("image/png");
//"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize
//var svg = '<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
// + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
// + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
// + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
// + '</svg>';
//var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
var iconObj = {
size: new google.maps.Size(32, 43),
url: imgSrc,
scaledSize: new google.maps.Size(32, 43)
};
return iconObj;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your Custom Marker </title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://canvg.github.io/canvg/canvg.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
You need to pass optimized: false.
E.g.
var img = { url: 'img/puff.svg', scaledSide: new google.maps.Size(5, 5) };
new google.maps.Marker({position: this.mapOptions.center, map: this.map, icon: img, optimized: false,});
Without passing optimized: false, my svg appeared as a static image.
Related
I have written an HTML that, using Google Maps API, shows the aircraf's landing point when I land in Flight Simulator.
What I would achieve is to rotate the map considering the aircraft's course.
The below HTML initially seems to run fine, but in one second the map go back to northern orientation.
How could I solve the issue? What I'm doing wrong.
Thanks and kind regards
Joe
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true&libraries=weather">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var image = {
url: "pubicons3/89.png", // url
scaledSize: new google.maps.Size(80, 80), // scaled size
// origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(40, 40) // anchor
};
var myctr = new google.maps.LatLng(45.8278829742545,13.4600065786118);
var mapOptions = {
zoom:18,
disableDefaultUI: true,
mapTypeControl: false,
scaleControl: true,
center: myctr,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading:89,
tilt:15
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var airloc = {lat:45.8278829742545, lng:13.4600065786118};
var marker = new google.maps.Marker({
position:airloc,
map:map,
icon:image,
ZIndex:4
});
// flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
You can use the Maps JavaScript API WebGL Features' Tilt and Rotation where you can set tilt and rotation (heading) on the vector map by including the heading and tilt properties when initializing the map, and by calling the setTilt and setHeading methods on the map. Note that n order to use the new WebGL features, you need a map ID that uses the vector map. You'll also need to update your API bootstrap request. Please see this.
Here's a sample code that shows what you want to achieve and code snippets below:
function initMap() {
var airloc = {
lat: 45.8278829742545,
lng: 13.4600065786118
};
const map = new google.maps.Map(document.getElementById("map"), {
center: airloc,
zoom: 16,
heading: 89,
tilt: 15,
mapId: "90f87356969d889c",
mapTypeId: 'satellite',
});
var image = {
url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", // url
scaledSize: new google.maps.Size(80, 80), // scaled size
// origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(40, 40) // anchor
};
var marker = new google.maps.Marker({
position: airloc,
map: map,
icon: image,
ZIndex: 4
});
}
I wonder how I can generate an image, actually a small circle
with color and number as parameter in Googlemaps?
So for example
MakeImage($FF0000, 5)
Will draw a red circle with number 5 in centre.
What is the best approach without pregenerate all possible
combinations as image-files?
In order to achieve this you can create an icon as Symbol interface and combine it with MarkerLabel. Note the presense of the property labelOrigin in the Symbol interface, it defines where you will put the label.
To demonstrate this approach I used the built-in SVG path google.maps.SymbolPath.CIRCLE. Have a look at the following example and run it to see circle Marker with number.
function initMap() {
var myLatLng = {lat: 47.363362, lng: 8.485823};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
icon: {
fillColor: "#FF0000",
strokeColor: "#FF0000",
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
labelOrigin: new google.maps.Point(0,0)
},
label: {
text: "5",
color: "white",
fontWeight: "bold",
fontSize: "16px"
}
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
</script>
I hope this helps!
I suggest you to use custom markers, here and here you can find a well documented API and it's explained how to make markers with bitmaps and svg graphics. I suggest to use SVG path notation like this:
var map;
var my_location = { lat: 12.97, lng: 77.59 };
icon = {
//this is a string that define a circle path
path: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
//this is a string that defines a hex color
fillColor: '#FF0000',
//this is a float that defines the opacity value from 0.0 to 1
fillOpacity: .6,
//this is a couple that defines a center point for the SVG
anchor: new google.maps.Point(0,0),
//this is a integer that defines the scale factor
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
function makeMarkerWithImageCircle(text,location){
var iconUrl = 'https://your_circl_image_url.png';
var marker = new google.maps.Marker({
position: location,
label: text,
icon: iconUrl,
map: map
});
}
function makeMarkerWithSVGCircle(text,location){
var marker = new google.maps.Marker({
position: location,
label: text,
draggable: false,
icon: icon,
map: map
});
}
//method to generate marker with custom image url and text
makeMarkerWithImageCircle("text",my_location);
//method to generate marker with custom svg and text
makeMarkerWithSVGCircle("text",my_location);
I guess you have your initMap() method wherein you initialise a Map instance
Then you can make your custom function to instantiate a custom Marker inside the Map map with a SVG as your icon property.
I didn't run this script, just wrote to explain how you can do this.
Have a nice day and I hope this was helpful (:
I'm having problem with icon resizing in google map.
I have an svg file for make it responsive.
this is how I call the svg file
MyGreenSVG = {
url: 'greenFill.svg',
size: new google.maps.Size(20, 35)
};
the property: size doesn't change the size of my icon, but only crop it.
the only way is to change the width and height in my svg file, and make 2 versions of it.
so I loose the interest of using svg...
this is a preview of my svg file :
<svg version="1.1"
x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve">
I'm also unable to resize using scale. I did find that if I use a MarkerImage then I can scale the svg and it looks pretty good, way better than a png as far as how smooth it is. I don't think it's a 'symbol' any more if I'm using MarkerImage though.
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: new google.maps.MarkerImage('icons/myIcon.svg',
null, null, null, new google.maps.Size(200,200)),
draggable: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm still looking for better solution too.
UPDATE (04/14/2015)
I found this on the docs at the bottom of complex icons and just above the link to symbols:
Converting MarkerImage objects to type Icon
Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards. Icon object literals support the same parameters as MarkerImage, allowing you to easily convert a MarkerImage to an Icon by removing the constructor, wrapping the previous parameters in {}'s, and adding the names of each parameter. For example:
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
becomes
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
I was playing around with the size and scaledSize and have an example here. It seems like I can comment out the size and scaledSize works fine. If the size is smaller than scaledSize the graphic gets cut off.
As kaplan pointed out, you can resize SVG markers with size and scaledSize. In my case, the result was still buggy - some instances of the same icon were rendered correctly, others left strange artifacts on the map.
I solved this problem in a very simple way: I defined width and height in the <svg> element.
I know this is an old post, so just an update from me.
This works for me without using MarkerImage, but it's imperative that the svg has its width and height properties set.
And you must use the icon property "scaledSize" to set the size of the icon on the map
Here is a solution on scaling markers based on the zoom
var someMarker;
var title = "Some title";
// A SVG flag marker
someMarker = new google.maps.Marker({
position: latlon,
map: map,
icon: {
path: 'M0 -36 L0 -20 24 -20 24 -36 M0 -36 L0 0 1 0 1 -20z', // SVG for flag
scale: 1.0,
fillColor: "#E6BD00",
fillOpacity: 0.8,
strokeWeight: 0.3,
anchor: new google.maps.Point(0, 0),
rotation: 0
},
title:title
});
// scale marker on different zooms
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
var picon = someMarker.getIcon();
if(zoom >=16 && zoom <= 17 && picon.scale != 0.6)
{ picon.scale=0.6;
someMarker.setOptions({icon:picon});
}
else if(zoom == 18 && picon.scale != 0.8)
{
picon.scale=0.8;
someMarker.setOptions({icon:picon});
}
else if(zoom > 18 && picon.scale != 2.0)
{
picon.scale=2.0;
someMarker.setOptions({icon:picon});
}
});
For single path SVG icon below code is worked for me
var icons = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
strokeColor: '#f00',
fillColor: '#0000ff',
strokeWeight:1,
scale: 0.15
};
marker= new google.maps.Marker({
position: latlng,
map: map,
icon: icons,
});
in above code scale is used to change the size of svg icon in google map marker.
var icon = marker.icon; // make a copy of the svg icon currently in there
icon.scale = newValue; // change it to whatever new value
marker.setOptions({icon:icon}); // dump it back into the map
I made my marker pulse to draw attention to it:
var iconscale = 0;
function animateMarker() {
iconscale += .05; // sin() is in rads, not degs
var icon = marker.icon;
icon.scale = 1.8 + 0.3 * Math.sin(iconscale); // pulse around scale of 1.8
marker.setOptions({icon:icon});
}
setInterval( animateMarker, 100 );
had the same problem, it solved by using scale:
MyGreenSVG = {
url: 'greenFill.svg',
scale: 0.5
};
The weird part is that i spend one hour yesterday trying to make it work and it didn't, today i changed the number from 0.3 to 0.2 and worked perfectly. so be careful with cache and stuff.
Trying to 'mark' an area with color and place a number in that area:
I have illustrated it here:
the numbers are static and don't change.
The area mark is suppose to change colors. and the area marking suppose to surround the area using the streets/roads around it(not just plain circle drawing)
I will try to explain myself better, Suppose those numbers are areas that I need to visit..
initially they are colored with red. If I visit one area .. then when i finish the visit the marking is turning to blue color.
Hope I make sense. I don't have any code for that .. I tried to search for it but with no luck
I'll try to simplify it, I can manage to drop the colors to not change and make it static also
for that I need to draw on the map some 'areas' but from the streets/roads surrounding the area
only. by that I mean not to draw a line between two points.
Here is one solution. Another might be an image overlay but I believe the solution below is more flexible.
You will need: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js
In the above javascript file once you have it, you will also need to change mapPane.appendChild(a) to floatPane.appendChild(a) this is to get the text on top of the polygon. As you will see in the following JSFIDDLE the text is underneath the polygon.
SOLUTION: http://jsfiddle.net/yN29Z/
The above javascript is map_label.js in the code below.
My polygon is not the best but you get the idea.
UPDATE: Added color change on clicking the polygon in to code below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</title>
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="scripts/map_label.js" type="text/javascript"></script>
<script>
var map;
var infoWindow;
var mypolygon;
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(50.71392, -1.983551),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
new google.maps.LatLng(50.71433, -1.98392),
new google.maps.LatLng(50.71393, -1.98239),
new google.maps.LatLng(50.71388, -1.98226),
new google.maps.LatLng(50.71377, -1.98246),
new google.maps.LatLng(50.71332, -1.98296),
new google.maps.LatLng(50.71334, -1.98324),
new google.maps.LatLng(50.71374, -1.9845),
new google.maps.LatLng(50.71436, -1.98389)];
// Construct the polygon.
mypolygon = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
mypolygon.setMap(map);
//Define position of label
var myLatlng = new google.maps.LatLng(50.71392, -1.983551);
var mapLabel = new MapLabel({
text: '1',
position: myLatlng,
map: map,
fontSize: 20,
align: 'left'
});
mapLabel.set('position', myLatlng);
// Add a listener for the click event. You can expand this to change the color of the polygon
google.maps.event.addListener(mypolygon, 'click', showArrays);
infoWindow = new google.maps.InfoWindow();
}
/** #this {google.maps.Polygon} */
function showArrays(event) {
//Change the color here
mypolygon.setOptions({ fillColor: '#0000ff' });
// Since this polygon has only one path, we can call getPath()
// to return the MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>My polygon</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
'<br>';
// Iterate over the vertices.
for (var i = 0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
My sources were as follows.
For the polygon:
https :// developers.google.com/maps/documentation/javascript/examples/polygon-arrays
For the label
Placing a MapLabel on top of a Polygon in Google Maps V3
I have a problem with the following code.
As you can see it draws a "T" on water which is fine and exactly what I want in this example.
The problem now is that I want to set the anchor.
If you comment-in the anchor line in the marker, you will see that the T is totally screwed up. instead of just shifted a little bit so that the foot of the T is the anchor.
Is this a bug, then I hope it gets fixed.
Is there a workaround how I do get this to work correctly besides recalculating all the path coordinates if that works at all?
<!DOCTYPE html>
<html>
<head>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40, -150),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
new google.maps.Marker({
icon: {
//anchor: new google.maps.Point(8.1328125, 17),
path: 'm 7.1855469,17 0,-12.6269531 -4.7167969,0 0,-1.6894531 11.347656,0 0,1.6894531 -4.7363279,0 0,12.6269531 z'
},
position: new google.maps.LatLng(40, -150),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
The issue is that you are using the command m which moves the pen to a specified point x,y relative to the current pen location. When you change your anchor you are not offsetting all the points uniformly, but are distorting them with an anchor that affects them all relative to each other. (I'm not sure I'm explaining this). M & L use x y points, m and l use relative x y points.
Here I have replaced your implied MoveTo (m) statements with LineTo (L). (I also moved your start point so it actually points to something, so you can see how changing the anchor uniformly moves the path. Also there is a basic marker for reference).
<!DOCTYPE html>
<html>
<head>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css"
rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 21,
center: new google.maps.LatLng(40, -83),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
new google.maps.Marker({
icon: {
anchor: new google.maps.Point(6, 15),
path: 'm 0,0 L12,0 L12,2 L7,2 L7,14 L5,14 L5,2 L0,2 z',
scale: 5,
strokeColor: 'red'
},
position: new google.maps.LatLng(40, -83),
map: map
});
// I am a reference marker
new google.maps.Marker({
position: new google.maps.LatLng(40, -83),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>