I have never worked with Google maps API.
For the school project I am working on; I need to get a direction between two locations (this is easy part and I think I can do this),
However I also need to put an X mark; at every 10 miles along the way.
Is this even possible?
Thank You.
Ok, here's a working solution that draws markers every 200 miles (I was working on big distances to check it worked on geodesic curved lines, which it does). To make this work for you, just change all the coordinates, and change 200 to 10
<!DOCTYPE html>
<html>
<head>
<title>lines with markers every x miles</title>
<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>
<!--- need to load the geometry library for calculating distances, see http://www.svennerberg.com/2011/04/calculating-distances-and-areas-in-google-maps-api-3/ --->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var startLatlng = new google.maps.LatLng(54.42838,-2.9623);
var endLatLng = new google.maps.LatLng(52.908902,49.716793);
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(51.399206,18.457031),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var startMarker = new google.maps.Marker({
position: startLatlng,
map: map
});
var endMarker = new google.maps.Marker({
position: endLatLng,
map: map
});
// draw a line between the points
var line = new google.maps.Polyline({
path: [startLatlng, endLatLng],
strokeColor: "##FF0000",
strokeOpacity: 0.5,
strokeWeight: 4,
geodesic: true,
map: map
});
// what's the distance between these two markers?
var distance = google.maps.geometry.spherical.computeDistanceBetween(
startLatlng,
endLatLng
);
// 200 miles in meters
var markerDistance = 200 * 1609.344;
var drawMarkers = true;
var newLatLng = startLatlng;
// stop as soon as we've gone beyond the end point
while (drawMarkers == true) {
// what's the 'heading' between them?
var heading = google.maps.geometry.spherical.computeHeading(
newLatLng,
endLatLng
);
// get the latlng X miles from the starting point along this heading
var newLatLng = google.maps.geometry.spherical.computeOffset(
newLatLng,
markerDistance,
heading
);
// draw a marker
var newMarker = new google.maps.Marker({
position: newLatLng,
map: map
});
// calculate the distance between our new marker and the end marker
var newDistance = google.maps.geometry.spherical.computeDistanceBetween(
newLatLng,
endLatLng
);
if (newDistance <= markerDistance) {
drawMarkers = false;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
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 am working on polygon distance area,with this i want to add marker and want to get the distance between that, I found code for that, but i am not able to edit that polygon area and not able to add markers, i tried lot but it is not working for me, can anyone please help me for this, how can i resolve this issue ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</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>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
var map;
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// Add a listener for the click event.
bermudaTriangle.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
}
/** #this {google.maps.Polygon} */
function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>Bermuda Triangle 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);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&callback=initMap">
</script>
</body>
</html>
To add markers, edit your script and place this code under triangleCoords:
// Add Markers to Coordinates
for(var i = 0; i < triangleCoords.length; i++) {
var pos = triangleCoords[i];
var marker = new google.maps.Marker({
map: map,
position: pos,
draggable: true
});
marker.setMap(map);
markers.push(marker);
}
To do some specific with markers, go here: Learn About Marker
To get distance, use Distance Matrix: Learn About Distance Matrix
Hope that helps you get moving.
JSBin: copy of your code w/ marker
I created a map with Google Map Maker. I did so by imported 5 different Excel files that had address fields and saved them all as different layers. The map now has about 500 addresses which are marked with pins that are color coded to the layer they belong with. I have no code per say, just the my Google Map which I created.
Is there anyway I can either use the "Draw Line" tool or another means to select a group of those markers/pins? Ideally I am envisioning being able to draw a shape around them and then being able to select those address to save them as a new data table or layer to export back to Excel.
Does anyone know of a way to achieve this? Even if it is another product then Google Maps? Thank you so much any help would be a life saver.
Something like this.
<head>
<style>
html, body, #map-canvas {
height: 400px;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script>
var random_marker_locations = [
new google.maps.LatLng(50.7, 4.1),
new google.maps.LatLng(50.4, 4.2),
new google.maps.LatLng(50.1, 4.3),
new google.maps.LatLng(50.8, 4.4),
new google.maps.LatLng(50.5, 4.5),
new google.maps.LatLng(50.2, 4.6),
new google.maps.LatLng(50.9, 4.7),
new google.maps.LatLng(50.6, 4.8),
new google.maps.LatLng(50.3, 4.9)
]
var map;
var markers = [];
var polygon;
var polygonMarkers = [];
var polygonLocations = [];
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(50.40, 4.34), // Brussels, Belgium
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// add markers
for(var i in random_marker_locations) {
var marker = new google.maps.Marker({position: random_marker_locations[i], map: map, title: 'marker ' + i});
markers.push(marker);
}
// add a click on map event
google.maps.event.addListener(map, 'click', function(e) {
// set a marker there, with a small measle icon
var position = e.latLng;
polygonLocations.push(position);
polygonMarkers.push(new google.maps.Marker({
icon: 'https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/measle.png',
position: position,
map: map
}));
// now let's add a polygon
drawPolygon(polygonLocations);
});
}
// draws a polygon
function drawPolygon(points) {
if(points.length < 3) {
return;
}
// first delete the previous polygon
if(polygon) {
polygon.setMap(null);
}
// #see https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
// display to input
displaySelectedMarkers(polygon);
}
// display the selected markers to input.
function displaySelectedMarkers(polygon) {
// empty the input
document.getElementById('selected_markers').value = '';
var a=0; // I use this to set a comma between the values, but no comma at the end
for(var i in random_marker_locations) {
// #see https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation
if (google.maps.geometry.poly.containsLocation(random_marker_locations[i], polygon)) {
document.getElementById('selected_markers').value += (a++>0 ? ', ' : '') + i ;
}
}
}
function clearSelection() {
if(polygon) {
polygon.setMap(null);
}
for (var i in polygonMarkers) {
polygonMarkers[i].setMap(null);
}
polygonLocations = [];
document.getElementById('selected_markers').value = '';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<hr>
<input id="selected_markers"><br>
<input type="button" onclick="clearSelection()" value="Clear polygon"><br>
Click to select a polygon selection around the markers
</body>
I'm working on this for 2 days and I do'nt have idea about what's happening.
I'm looking for Phamacy near an address on Google Maps
farmácia loc: R. Manoel Bandeira, 324-490, Embu - São Paulo, 06846-570, Brazil
As you can see there are a lot of pharmacies nearby 5 kilometers
When trying to do it on my site by using the google places api. The result is = NOTHING.
Follow the code
Any thoughts?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=se"></script>
<script>
function init() {
const location=new google.maps.LatLng(-23.6334282, -46.8739405);
const radius = 5000;
// Make map
var mapOptions = {
center: location,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Make a circle
var circOptions={
center: location,
radius: radius,
map: map
};
circle = new google.maps.Circle(circOptions);
// Get shops in radius
service = new google.maps.places.PlacesService(map);
var request={ //my request
location: location,
radius: radius,
types: ["pharmacy"]
};
service.search(request, function (results, status){
if (status == google.maps.places.PlacesServiceStatus.OK){
for (var i= 0, result; result=results[i]; i++) { //add markers
distance=google.maps.geometry.spherical.computeDistanceBetween(location, result.geometry.location);
if (distance>radius)
continue;
var marker = new google.maps.Marker({
map: map,
position: result.geometry.location,
reference: result.reference
});
}
}
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
<style>#map {height: 500px;width: 500px;}</style>
</head>
<body><div id="map"></div></body>
</html>
I've made the route on the map. The route generated using some coordinates which completed with additional information (speed). I want when the route is hover, a tooltip will appear and showing information (speed) at those coordinates. I confuse how to display the tooltip of speed.
<html>
<head>
<title>Polyline Route v3 Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var locations = [
{"speed":"13","lat":"-6.246192976751192","lon":"106.79324626922607"}, {"speed":"33","lat":"-6.245723710157699","lon":"106.79603576660156"}, {"speed":"23","lat":"-6.245723710157699","lon":"106.79796695709229"}, {"speed":"43","lat":"-6.243334710069922","lon":"106.79800987243652"},
{"speed":"12","lat":"-6.245723810157699","lon":"106.79796725709229"}, {"speed":"1","lat":"-6.245723860157699","lon":"106.79796735709229"}, {"speed":"45","lat":"-6.245723890157699","lon":"106.79797755709229"}, {"speed":"21","lat":"-6.245723910157699","lon":"106.79797895709229"}
];
var map;
function createRouteMap(){
var listRoute = [];
for (var i = 0; i < locations.length; i++) {
listRoute.push(new google.maps.LatLng(locations[i].lat, locations[i].lon));
}
var mapOptions = {
zoom: 16,
center: listRoute[Math.ceil(listRoute.length/2)],
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
showMap(listRoute);
createMarkers(locations);
}
function showMap(listRoute){
if((listRoute.length < 1) || (listRoute == null)){
jQuery("#map_canvas").html('<div class="alert alert-info"> <strong>Empty Trail!</strong> This trip still has no trail </div>'+
'<div class="btn-toolbar"> <p><code>The gps device </code>in the car still not sent position!</p> </div>');
}else{
var flightPath = new google.maps.Polyline({
path: listRoute,
strokeColor: "#FF0000",
strokeOpacity: 5,
strokeWeight: 3.7
});
flightPath.setMap(map);
}
}
function createMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
var point = locations[i];
var myLatLng = new google.maps.LatLng(point.lat, point.lon);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'greencirclemarker.png',
title: point.speed
});
}
}
$(document).ready(function() {
createRouteMap();
});
</script>
</head>
<body>
<div id="map_canvas" style="height:400px; border:1px 00f solid;"></div>
</body>
</html>
Your "speeds" are associated with points. You have a couple of options:
add markers and display the speed on mouseover of the marker (or as a tooltip of the marker)
render each segment of the line as a separate polyline with its own mouseover event handler. You will need to specify how to apply the speeds to the line segments. There are more complicated ways to do it with a single polyline, but with a mouseover event may have performance issues.