google maps api marker composed of image and line - google-maps

Is it possible with "Google Maps Api" to obtain a marker composed of a line and ends with a picture?
I tried to use a marker consists of a single image (eg, line and circle) and if there are 2 adjacent markers will be covered from the first second.
For example I have marker like this:
--0
and the second it's close the result is:
--0-0
I must rotate so the result is:
--0
\
0
how I can make this?

Take a look to MarkerOptions the attribute anchorPoint.
Using the Marker position you can detect a possible overlap between images, and change that value and image to do what you need.

Related

Who knows, or knows how to figure out, which google map markers are available?

I want to use a variety of location markers in a map, of different colors. I like google's "teardrop"-shaped ones so that the location itself is less obscured, due to the point top of the inverted teardrop.
This is a link to the green one:
http://www.googlemapsmarkers.com/v1/009900/
...and the green uses 0099FF
But what about the other colors? Is there a list somewhere or do I have to write a utility to convert color to RGB, or what?
Even with that, how would I know which colors are supported/supplied? Or are the colors dynamically generated based on the RGB value you pass?
UPDATE
Based on the chart here:
http://cloford.com/resources/colours/500col.htm
...I would expect that entering this:
http://www.googlemapsmarkers.com/v1/65535/
...would return a bright yellow marker, but instead I get:
"400. That’s an error.
Your client has issued a malformed or illegal request.
The parameter 'chs' must have a width of at least 1 pixel.
That’s all we know."
UPDATE 2
I also found that you can put text on the marker by inserting the text in the penultimate spot.
This returns a blank yellow inverted teardrop:
http://www.googlemapsmarkers.com/v1/FFFF00/
..and this:
http://www.googlemapsmarkers.com/v1/Platypus/FFFF00/
...returns an inverted yellow teardrop with the word "Platypus" plastered on top of it.
You can pass your own RGB color. I suppose the markers are dynamically generated when the server receive your request, but anyway, you can create the color you exactly want.

bing maps how to get the not share square of 2 rectangle boundaries?

I am using bing maps and I want to query my database to return all values inside the map bounds, so every time, the map moves, I want to query it again.
In order to make it more efficient, I want to query only the boundary I haven't query before.
So I get the previous bound and the current bound and want to get the square bound of the non shared rectangle between the previous and the current rectangles (The not shared rectangle of the current bounds).
For example, If I move the map right for 5cm and up for 2cm, I will recieve a new LocationRect of the rectangle 5cm 2cm (the not shared).
I have the map bounds:
LocationRect currentBounds = map.Bounds;
When I move the map I get a new bounds, but before I save the previous bounds:
previousBounds = currentBounds;
I want to get the new location I moved to (only the new, not the whole currentBounds).
So I want to do something like this:
LocationRect newMapBounds = currentBounds.NotSharedBounds(previousBounds);
But how can I check this? I saw there is a method of Intersects but it returns bool, and I need to get the new LocationRect...
I will be very thankfull for the helper :)
If i understand you right you have the blue rectangle(ABCD) and when you move the map
you have red rectangle(EHGF) and you know their vertexes coordinates
e
So the not common space creating 3 new rectangles for you: Green Yellow And Black.
And you need coordinates of those 3 rectangles in order to query your data, in other words you need to perform three queries to you DB in order to get the NOT common space of BLUE and RED rectangles.
You will have scenarios of RED and BLUE rectangles that you need to deal before you start the calculations:
The rectangles are coincide.
The scenario in the picture
They have no common space at all.
For example the vertexes coordinates of GREEN rectangle are(The second scenario):
T(x) = E(x), T(y) = D(y)
F is a common of RED and GREEN Rectangles
N(x) = B(x) , N(y) = G(y)
F is a common of BLUE and GREEN Rectangles
Hope it helps.

Google Maps fitBounds into specific area

I want to achieve the following: "Place an array of markers that may be distributed across a large range of lat, lng into a fitbounds method that places the fitbounds inside a custom rectangle."
The image below should clarify what I'm trying to achieve. Basically I have an array of markers that I want to make sure always fits within a small box on the right hand side of my page.
The white box contains some information pertaining to the markers, which will always be present, so I don't want any markers hidden behind the white box, and I'd love if I could define that they live within the black box. (Note the black box is just a visual reference for this question).
You can use the containsLocation to ensure a point is inside of a polygon. See here.
As you go through each coordinate pair in your array, verify the location is within the polygon area, then add to the map accordingly. You can also set an attribute to those points to "define" what extent they are in.
var latlng = new google.maps.latLng(array[n]);
if (google.maps.geometry.poly.containsLocation(latlng, polygon)){
marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.dataset.box = 'blackbox';
} else {
alert('Not inside black box');
}
If you're using HTML5, you can add a dataset attribute to markers that are within the polygon.
marker.dataset.box = 'blackbox';
If not, you can use setAttribute.
marker.setAttribute('data-box', 'blackbox');

google map api v3 center point on polyline across international date line

I'm answering my own question (hopefully for your benefit), but this is the issue:
I've created a world map with polylines (in Google maps API v3). Some of these lines span the IDL (international date line). I want to place directional arrows on some of my lines, one arrow in the center of each line. On lines that span the IDL, the arrow center calculated by averaging the 2 end points together:
(latlng1.lat()+latlng2.lat()/2), (latlng1.lng()+latlng2.lng()/2)
draws the line the opposite way around the world leaving a floating arrow on my map instead of in the center of the actual line.
I initially sought a formula for getting the reverse of the line and somehow determining which was used. But it's too dependent on the map display. I even went so far as to see if I could get the center from the end points of the line if I first converted them to pixels, but the data conversion had no effect on the outcome.
So I then thought to look for an intersect method on the polyline, passing a point to check - and if it wasn't, find the center point from the reverse line (which I believe would 180-center.lng()) but there is no intersection method on polylines. So I started looking into the bounds object, because there are some intersection/contains methods on bounds.
So here is a very simple solution for a relatively undocumented problem:
(credit for function to retrieve bounds goes to Ben Appleton, ty):
function getBoundsForPoly(poly) {
var bounds = new google.maps.LatLngBounds;
poly.getPath().forEach(function(latLng) {
bounds.extend(latLng);
});
return bounds;
}
var poly_bounds = MapAbstraction.get_poly_bounds(line);
var center_point =poly_bounds.getCenter();
and then I can pass my center_point to my marker creation tool to generate the arrow in the actual center of the line without worrying about which way it was drawn.

Google maps to show locations

In my application i want to show two or more points in the google maps and also need to draw a line between them. I want this to show by a tag of html. How can i do it??
So you need to use the static maps API.
Here's an example with markers and a polyline:
<img src="http://maps.googleapis.com/maps/api/staticmap?
size=500x300
&sensor=false
&markers=color:green|label:1|51.511333,-0.119355
&markers=color:blue|label:2|51.507801,-0.107569
&markers=color:red|label:3|51.510999,-0.104297
&path=color:0xff0000ff|weight:5|51.511333,-0.119355|51.506205,-0.114462|51.507774,-0.10861|51.507801,-0.107569|51.5071,-0.107344|51.507207,-0.105016|51.507507,-0.104404|51.510999,-0.104297">
The last line starts off setting the attributes for the polyline, i.e. its color is red (ff0000). The last 'ff' indicates it's 100% solid, but you can vary these last two characters anywhere between 00 - FF (base 16) to go between 0 - 100% opacity (or if you leave those last two characters off entirely, it'll default to 50% opacity). It has a weight (thickness) of 5.
After that, it's just a list of coordinates for the polyline, each one separated by a |
Check the documentation: https://developers.google.com/maps/documentation/static-maps/intro#Paths