I am trying to draw arrow images on the google map and rotate them according to the certain angle.I dont wanna use google predefined Icons.
Here is my code which I was trying but it is not working.Image is coming but unable to rotate image.
degreeRotation = 90 ;
marker = new google.maps.Marker({
position : position,
map : map,
icon :{
url: '../resources/images/arrow.png',
scale: 1,
rotation: degreeRotation,
},
});
Any suggestions?
Related
Well, I am not new to google map, but not very much experienced in it.
I want to know how to put a CUSTOM ICON right on the middle of a polyline ?
For clarity I attached an image, where you can see RED TRIANGLE is my custom icon, that I want to place right in the middle. I want this triangle to be CLICKABLE that will open a popup etc where I will place some form etc.
Here is the image:
http://oi61.tinypic.com/amxhkh.jpg
Please Guide me / help me with code etc.
Best Wishes and Billion Thanks in Advance !
ZH.!
A more simple way is set the symbol icon offset to 50%:
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var poly = new google.maps.Polyline({
strokeColor: color,
strokeOpacity: 0.5,
icons: [{
icon: lineSymbol,
offset: '50%'
}],
...
});
The method google.maps.geometry.spherical.computeLength() gives you the complete length of a polyline-path.
Based on this length walk through the path and use a little bit Math to find the middle(to get the distance between 2 points use computeDistanceBetween()).
Note: the geometry-library isn't loaded by default, see: https://developers.google.com/maps/documentation/javascript/libraries
I'm working on a WordPress plugin where users can build a route map and show it on their site. In the admin panel it shows a preview of the existing route on the map, and also a marker they can drag to a new location that they want to add to the map.
The default zoom location for the map is set in Europe. But if they for example add a few stops in Australia, then only that part of the world is visible and you won't see the draggable icon anymore that is used to specify new locations, and that is a problem.
So I thought of fixing it with fitbounds, so it would always make the draggable marker and the already created route fit on the screen. The code I have does show all the locations on the map, but because I draw polylines between the visited locations, it somehow also draws a line to the draggable marker in Europe, which it shouldn't do because it's not part of the route.
You can see an example here -> http://jsfiddle.net/tijmen/HctvT/1/
Part of the code:
/* Draw lines between the markers */
function drawFlightPlan( flightPlanCoordinates ) {
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#ad1700",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap( map );
fitBounds( flightPlanCoordinates );
}
/* Zoom the map so that all markers fit in the window */
function fitBounds( flightPlanCoordinates ) {
var bounds = new google.maps.LatLngBounds ();
/* Include this latlng value in europe, but I dont want a line going to that latng... */
var defaultLatlng = new google.maps.LatLng('52.378153', '4.899363');
flightPlanCoordinates.push( defaultLatlng );
for ( var i = 0, flightPlanLen = flightPlanCoordinates.length; i < flightPlanLen; i++ ) {
bounds.extend ( flightPlanCoordinates[i] );
}
map.fitBounds( bounds );
}
The lines between the markers in Australia are fine, but the line to Europe shouldn't be there (normally there would just be a different colored marker in Europe).
I don't really understand why there is a line going to Europe in the first place. The flightPath.setMap( map ); is run inside the drawFlightPlan function. And it's not untill the fitBounds function is that I add the latlng value for Europe to the flightPlanCoordinates array.
I searched for a way to remove a partial polyline, but I can't find anything about it that works. I know how to remove all the markers or polylines, but not a single polyline part. Is that even possible?
Any ideas or suggestion how to fix this, or is this something that cannot be fixed the way I want to?
initialize bounds with the LatLng in europe instead of pushing this LatLng into flightPlanCoordinates
http://jsfiddle.net/doktormolle/HctvT/4/
When you use a reference to an array as path for a polyline any changes to the array will affect the polyline.
I use custom marker Icon for google Maps. My problem is simple, transparent png that I prepared has extra 23px of empty space at the bottom - this is done for some photoshop glow effect, but an actual point of marker starts at 23px from bottom.
How do I take this into consideration so that marker lands on the right spot? I need something like margin-bottom:-23px; but with javascript.
Hard way would be to calculate 23px in latlong measures and than adjust marker position. But that would be insanely ugly...
Any ideas?
so far I've this:
var marker_icon = new google.maps.MarkerImage('<?php echo get_bloginfo("template_url"); ?>/images/marker.png', new google.maps.Point(10,10));
var marker = new google.maps.Marker({
position: latlngPos,
map: map,
icon: marker_icon
});
but since I changed icon: to the variable, I don't see marker anymore. Console tells me nothing.
image is this:
See the documentation on how to define a custom Icon
anchor | Point | The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
url | string | The URL of the image or sprite sheet.
google.maps.MarkerShape object specification
It is computed from the top left corner of the image (0, 0). But you haven't provided the size.
Developers Guide (with example)
Your image is 59px × 72px
So I think the anchor should be 72-23: new google.maps.Point(30,49);
var marker_icon = {
url: <your url>,
size: new google.maps.Size(59,72),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(30,49)
};
Solution was to do it this way:
var marker_icon = {
url: '<?php echo get_bloginfo("template_url"); ?>/images/marker.png',
size: new google.maps.Size(59,72),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(29,58)
};
Thank you geocodezip for the direction.
I have markers which use MarkerImage on my map.
The problem is I'm trying to shift the marker image so the icon centre is on the exact coordinate position.
I doesn't work.
My code is:
var image = new google.maps.MarkerImage(icon,
// This marker is 15 pixels wide by 15 pixels tall.
new google.maps.Size(15, 15),
new google.maps.Point(7,7),
new google.maps.Point(7,7)
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: title,
icon: icon
});
Markers should be centred on the polylines as they mark object which are located on polylines. They appear next to it on my map.
Ok. I had icon instead of image inserted in my marker so it didn't see the shifted image.
Besides MarkerImage has changed to Icon type in the reference since version 3.11 so it was worth amending too.
I have polylines on my map and markers which should sit on the polylines.
The problem is the markers are shifted top left and they look like they are in some distance from polylines while they should be on top of them.
Anybody has an idea how to fix it? Thank you
OK
I found an answer in case anybody needs it.
I just used MarkerImage like that:
var image = new google.maps.MarkerImage(icon,
// This marker is 20 pixels wide by 32 pixels tall.
null,
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(7, 7)
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: title,
icon: image
});
where new google.maps.Point(7, 7) takes offset number in pixels.
Initial position 0,0 falls in the center bottom of the marker so I offset the image by half of it's width and height.
Works perfectly now.