Develop Reference

How to draw a line and a box on gmaps?

I've seen this tool which let you draw a line on gmaps and it generates the js code for you
So the JS is:
var myCoordinates = [
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
What I would like to do is to start the line from a pin I receive and not a pin I set when I click as per that tool and then I would to draw a infobox at the end of that line (so not where it starts form the pin).
What I am aiming for is to draw a line form a starting point and have an infobox such as per this image below, see the lines on the map
Therefore I can pass the coords here:
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
But how would I target the end of the line and place text there?
With this answer I can define a start and end, but how to draw a box at the end point?

I think you can do it using a marker at the end point of the line, then attaching, for example an infoWindow, at the end and finally hiding the marker.
function initMap() {
var coordinates = {
lat: 40.785845,
lng: -74.020496
};
var coordinates2 = {
lat: 40.805845,
lng: -74.130496
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: coordinates,
scrollwheel: false
});
var marker = new google.maps.Marker({
position: coordinates,
map: map
});
var infoMarker = new google.maps.Marker({
position: coordinates2,
map: map
});
var infowWindow = new google.maps.InfoWindow();
var line = new google.maps.Polyline({
path: [
marker.position,
infoMarker.position
],
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
});
line.setMap(map);
infowWindow.setContent("<b>Hello world!</b>");
infowWindow.open(map, infoMarker);
infoMarker.setVisible(false);
}
google.maps.event.addDomListener(window, "load", initMap);
Check it working on this jsfiddle

how to get an image to point in a certain direction in a visualisation map

So I am using JavaScript to plot a position of a flight and its flight path on a visualisation map. I am getting the data from a node server that I have created. I have looked at similar question on stack over flow but I haven't been able to get them working.
I am currently struggling with the positioning of the flight icon, as I want it to point in the same direction as the flight path or even put a marker at the top of the image so it can point to a certain latitude and longitude. At the minute the flight icon only faces north.
Here is a screenshot of my code. I tried using the anchor in the Google maps API but I couldn't get it working so I commented it out.
var flightCord = [];
for (var i = 0; i < data.flight.length; i++) {
var lat = data.flight[0].lat1;
var lng = data.flight[0].lng1;
// Co-ordinates for Dublin Airport 53.421379, -6.27
var image = new google.maps.MarkerImage("plane3.png"
//new google.maps.Size(25,25),
//null, null,
//new google.maps.Point(53.4213879,-6.27)
//new google.maps.Point(0, 50)
);
var latLng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
var flightCord = [
{lat:data.flight[0].lat1, lng: data.flight[0].lng1},
{lat:data.flight[i].lat1, lng:data.flight[i].lng1}];
}
var flightPath = new google.maps.Polyline({
path: flightCord,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 1
});

Google Maps API circle markers, variable size

var xml = data.responseXML;
var circles = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("location");
var scans = markers[i].getAttribute("scans");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("long")));
var html = name;
var marker = new google.maps.Marker({
center: center,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
radius:1000
});
bindInfoWindow(marker, map, infoWindow, html);
}
Trying to add some data to circle markers.
The circles are already markers for specific locations, but I want to make them vary in size depending on a count that corresponds to that location. I cannot seem to find any code to make markers of variable size, since each marker is most likely going to have a unique number of contacts. Any ideas?
Here's the code I have now for markers. I know its not right, since it's not producing what I want.
https://developers.google.com/maps/documentation/javascript/examples/circle-simple <---This is the effect that I am looking for, but I don't understand how to get the values for size to change based on the data entered in the table.

You can set the marker radius to an integer returned by a function. Or it can be an expression.
Here is a JsFiddle with a working example where the count attribute in the XML is set by an expression.
function initMap() {
var myLatLng = new google.maps.LatLng(47.6685771, -122.2553681),
myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map'), myOptions);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; ++i) {
var marker = markers[i];
var name = marker.getAttribute("location");
var point = new google.maps.LatLng(
parseFloat(marker.getAttribute("lat")),
parseFloat(marker.getAttribute("long")));
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: point,
radius: marker.getAttribute("count") * 75
});
}
}
https://jsfiddle.net/plbogen/ecj8o4uL

Google Maps API v3 Polygon closing

When creating a polygon using the Google Maps API v3, how can I prevent the polygon from snapping to other 'maps'?
So instead of:
I would like to make the polygon close like this:

The issue occurs when the difference between the longitudes of 2 consecutive points in the path is >=180
the longitudes of the first 2 points are -97 and 93, so that's the problem in this case(difference is 190)
The only thing I may suggest so far is to split this portion of the path:
new google.maps.LatLng(81, -97),
//additional point
new google.maps.LatLng(80.5, -12),
new google.maps.LatLng(80, 93),
new google.maps.LatLng(56, 78),
new google.maps.LatLng(60, -94)
Demo: http://jsfiddle.net/doktormolle/39CtV/

Once I also Needed it , and thankfully Devs had provided there Research ,so i'm sharing With you
//Taking Example of Bermuda Triangle
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
For More Reference
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

Google maps - add road directions, circle, postal code areas

I got a basic map running using google maps v3
Next features that I would like to add include:
draw line as road directions instead of direct point to point polyline
draw a circle 75 km circle around from a specific point
highlight the postal code of a specific point.
I Would appreciate people's thoughts on these topics
var geocoder;
var map;
function fnPresentMap()
{
geocoder = new google.maps.Geocoder();
var locationArray = new Array();
locationArray[0] = new Array();
locationArray[1] = new Array();
locationArray[0][0] = document.getElementById('LAT_OUT_1').innerHTML;
locationArray[0][1] = document.getElementById('LON_OUT_1').innerHTML;
locationArray[1][0] = document.getElementById('LAT_OUT_2').innerHTML;
locationArray[1][1] = document.getElementById('LON_OUT_2').innerHTML;
var latlng = new google.maps.LatLng(44, -75);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var myLatlng;
var image_name;
for (var count = 0; count < locationArray.length; ++count){
image_name = "img/marker_"+(count+1)+".png";
myLatlng = new google.maps.LatLng(locationArray[count][0],locationArray[count][1]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image_name
});
}
// re-center
var centerLocation = new google.maps.LatLng(locationArray[0][0],locationArray[0][1]);
map.setCenter(centerLocation);
// show line
var points = [
new google.maps.LatLng(locationArray[0][0],locationArray[0][1]),
new google.maps.LatLng(locationArray[1][0],locationArray[1][1])
];
var line = new google.maps.Polyline({
map: map,
path: points,
strokeColor: "#FF0000",
strokeWeight: 2,
strokeOpacity: 1.0
});
}

To render road directions between two specific points, you need to use the Google Maps API directions service. If you check out the documentation you will find pretty straightforward examples to make a directions request and render the results on a map as a line between the two points.
I think the best approach for drawing a circle around a point is to draw a polygon with enough points to approximate a circle. You can find a good example of this here.
To highlight the postcode at a specific point, I suggest you use the Google Maps API reverse geocoding service (convert from a latitude/longitude to a human readable address). You can extract the postcode from the JSON response you get back and then display it on the map using a infoWindow or some other kind of overlay.