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.
Related
Please help me, i have some queries regarding google map API
Please concern 3rd point first
Is it possible to get the center point of map regarding map div in HTML (like my map div is 100px height and 100px width, then i get the center point lat long for 50,50px), i use the map.getCenter(); but it give the map center point
Is it possible on zoom_changed event my marker not sift on the browser screen it change the position with respect of zoom_changed event and stay same on browser screen ?
For example for point 2nd
Initially i have the map with marker set on London
But when i zoom in then the
Can i get the coordinates(lat long) with respect of net image place on map
If have any suggestion and solution please reply
1) The center point of the html div and that of the map will be the same. Using the same example that you have put if the map div is 100px height and 100px width, then center lat long should be 50,50px which is exactly what map.getCenter() will return.
2) Yes you can use the zoom changed event to move the marker to the center of the map. You will need to call the initZoomChanged method as given below. You can replace "centerMarker" with the name of your marker
3) Haven't really understood what you are trying to do here. Could you provide some more clarification?
The code for creating a marker at the map center and then keeping it in the center of the map after zoom in or zoom out is given below :
var centerMarker;
function createMarker()
{
var myLatLng = {lat: 51.5074, lng: 0.1278}
centerMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Map Center'
});
}
function initZoomChanged()
{
google.maps.event.addListener(map, 'zoom_changed', function() {
var center = map.getCenter();
centerMarker.setPosition(center);
});
}
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?
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 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.