Develop Reference

Creating MapKit JS with origin, destination and waypoints

I'm migrating from Google Maps API to Apple MapKit JS for the simple reason I have a developer account with them and they offer more free hits.
Anyway, actual examples of MapKit JS are a bit thin (or at least Google isn't finding them - draw what conspiracy theories you will), so although I've got the basics going of displaying an embeded map, I can't seem to do the next step which is route between two points (Apple's documentation also seems impenetrable as they don't show examples).
Here's my script for a basic map:
<script>
mapkit.init({
authorizationCallback: function(done) {
done('[MY-TOKEN]');
}
});
var MarkerAnnotation = mapkit.MarkerAnnotation
var myMarker = new mapkit.Coordinate(55.9496320, -3.1866360)
var myRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(55.9496320, -3.1866360),
new mapkit.CoordinateSpan(0.003, 0.003)
);
var map = new mapkit.Map("map");
var myAnnotation = new MarkerAnnotation(myMarker, { color: "#9b6bcc", title: "theSpace On The Mile"});
map.showItems([myAnnotation]);
map.region = myRegion;
</script>
Now I want to:
• Show a walking route between two points
• Include waypoints on the route
Could someone show the code that would achieve this? Once I can see an example I know I'll get it ;-)

Ok, so I've found a solution to this so sharing it here for the benefit of others.
Let's start by saying Apple's MapKit JS doesn't appear to have a waypoints option as offered by Google Maps API - so the way around that is to create a map that stores the markers in an array and then routes from one to the next. The code stores the location of the last waypoint in a variable, and doesn't bother to draw a route to the last waypoint if this is the first one in the array (obviously).
<script>
// Initiallise MapKit - you'll need your own long-lived token for this
mapkit.init({
authorizationCallback: function(done) {
done('[MY-TOKEN]');
}
});
// Function to draw the route once MapKit has returned a response
function directionHandler(error, data) {
data["routes"].forEach(function(route, routeIdx) {
if (routeIdx !== 0) { return; }
overlays = [];
route['path'].forEach(function(path) {
// This styles the line drawn on the map
let overlayStyle = new mapkit.Style({
lineWidth: 3,
strokeColor: "#9b6bcc"
});
let overlay = new mapkit.PolylineOverlay(path, {
style: overlayStyle
});
overlays.push(overlay);
});
map.addOverlays(overlays);
});
}
// This asks MapKit for directions and when it gets a response sends it to directionHandler
function computeDirections(origin,destination) {
let directionsOptions = {
origin: origin,
destination: destination,
transportType: mapkit.Directions.Transport.Walking
};
directions.route(directionsOptions, directionHandler);
}
// This sets the initial region, but is overridden when all points have been potted to automatically set the bounds
var myRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(55.9496320, -3.1866360),
new mapkit.CoordinateSpan(0.05, 0.05)
);
var map = new mapkit.Map("map");
map.region = myRegion;
var myAnnotations = [];
// lastWaypoint variable is 'unset' initially so the map doesn't try and find a route to the lastWaypoint for the first point of the route
var lastWaypoint = "unset";
var directions = new mapkit.Directions();
// Array of co-ordinates and label for marker
waypoints = [
{name:'Sofi’s Bar',lat:55.9746308,lon:-3.1722282},
{name:'TThe Roseleaf Cafe',lat:55.975992,lon:-3.173474},
{name:'Hemingway’s',lat:55.9763631,lon:-3.1706564},
{name:'Teuchter’s Landing',lat:55.9774693,lon:-3.1713826},
{name:'The King’s Wark',lat:55.9761425,lon:-3.1695419},
{name:'Malt and Hops',lat:55.975885,lon:-3.1698957},
{name:'The Carrier’s Quarters',lat:55.9760813,lon:-3.1685323},
{name:'Noble’s',lat:55.974905,lon:-3.16714},
{name:'The Fly Half',lat:55.9747906,lon:-3.1674496},
{name:'Port O’ Leith',lat:55.974596,lon:-3.167525}
];
// Loop through the array and create marker for each
waypoints.forEach(function(data) {
var myAnnotation = new mapkit.MarkerAnnotation(new mapkit.Coordinate(data['lat'],data['lon']), {
color: "#9b6bcc",
title: data['name']
});
myAnnotations.push(myAnnotation);
// As long as this isn't the first point on the route, draw a route back to the last point
if(lastWaypoint!="unset") {
computeDirections(lastWaypoint,new mapkit.Coordinate(data['lat'],data['lon']));
}
lastWaypoint = new mapkit.Coordinate(data['lat'],data['lon']);
});
map.showItems(myAnnotations);
</script>
This map is for a pub crawl around Leith, so the trasportType is 'Walking', but change that to 'Automobile' if you so wish.
With credit to Vasile whose MapKit JS Demo (https://github.com/vasile/mapkit-js-demo) helped me understand a lot more about the options.

How to remove old map markers and update new in Google Maps [duplicate]

This question already has answers here:
Google Map API - Removing Markers
(5 answers)
Closed 3 years ago.
I'm creating an application which gets the real-time location and renders to Google Map. After a specific time interval, I have to remove old markers and need to render the udpated markers.
Below is my code
function initMap(rtl_data) {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(24.238162, 45.156379);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = []
var map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
makeMarkers(rtl_data)
function makeMarkers(rtl_data){
// Drivers Location Markers
deleteMarkers()
features = []
marker = []
drivers_latlng = rtl_data.drivers_latest_location
drivers_latlng.forEach(function(e){
features.push({
position: new google.maps.LatLng(e.lat, e.lng),
type: e.order_id,
title: e.driver_id,
description: e.order_id ? "Ongoing order: "+e.order_id : "No order assigned."
})
})
image = "/files/truck.png"
infoWindow = new google.maps.InfoWindow();
for (i = 0; i < features.length; i++) {
marker = new google.maps.Marker({
position: features[i].position,
map: map,
title: features[i].title,
type: features[i].type,
icon: image,
description: features[i].description
});
//Attach click event to the marker.
(function (marker) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + marker.description + "</div>");
infoWindow.open(map, marker);
});
})(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < marker.length; i++) {
marker[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
console.log('clearMarkers')
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
console.log('deleteMarkers')
clearMarkers();
marker = [];
}
}
// Fetch Realtime using time interval
setInterval(function() {
frappe.call({ // Simple AJAX Call which returns locations and location realated data.
method: "get_drivers_locations",
async: false,
callback: function(r){
rtl_data = r.message
}
})
makeMarkers(rtl_data)
}, 5000);
I already used Method's which is used in the documentaion by Google Map.
Using ClearMarkers the old markers get cleared. But in my case it is not working.
When I run above code it displaying me both old and upadted markers.
See below screenshot which is repetating markers with updated locations.

You initialize marker as an array:
var marker = []
But later assign a Marker instance:
marker = new google.maps.Marker({...})
I didn't run your example, but I expect, that marker variable will contain not an array of markers, but the last created marker.
Try to do next:
rename marker variable to markers
implement addMarker function. This function should push a new marker to markers array

After reading below thread:
Google Map API - Removing Markers
I found the solution.
I created one array.
gmarkers = []
and pushed all my new markers in it.
gmarkers.push(marker)
To delete the markers I used the following function.
function setMapOnAll(map) {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(map);
}
}

Your closure bracket for the init function is wrong. If you look at the original documentation the init function is closed before the addmarker function. In your example it is closed just before the setInterval. So your setInterval probably can't even access the makeMarker function because this one is inside another function.

I'm using Google Maps in React and my markers don't always load?

So as the title says, I'm using React and trying to implement Google Maps with list of places fetched from Foursquare and display their markers. I'm not using any packages such as react-google-maps etc, just vanilla JS. The map loads just fine, the places are fetched BUT the markers show every now and then. When they do load, they point to correct location but they load rarely. I'm not sure what's wrong with my createMarkers function here:
// Initialize map
initMap = () => {
let map = new window.google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: {lat: 45.5616873, lng: 18.6770196 }
});
this.createMarkers(map);
}
// The following function uses the places array to create an array of markers on initialize.
createMarkers = (map) => {
for (let i = 0; i < this.state.places.length; i++) {
// Get the position from the location array
let position = this.state.places[i].location;
let name = this.state.places[i].name;
let venueID = this.state.places[i].venueID;
// Create a marker per location, and put into markers array.
let marker = new window.google.maps.Marker({
position: position,
name: name,
animation: window.google.maps.Animation.DROP,
icon: this.state.defaultIcon,
venueID: venueID,
map: map
});
// Set state to save the marker to our array of markers.
this.setState((state) => ({
markers: [...state.markers, marker]
}))
}
}
// Create default marker icon
makeMarkerIcon(markerColor) {
const markerImage = new window.google.maps.Icon(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +
'|40|_|%E2%80%A2',
new window.google.maps.Size(21, 34),
new window.google.maps.Point(0, 0),
new window.google.maps.Point(10, 34),
new window.google.maps.Size(21,34)
);
return markerImage;
};
Any help would be much appreciated, as I'm still new to React and prone to beginner's mistakes.

Track a user draw polyline snap to roads bing maps

Was wondering if anyone has any experience or could help with the logic, to track a user (car) with Bing maps
As the user travels a line should be drawn of their journey, but snap to roads, the way I have things set at the moment, lines will be drawn through buildings.
Because whenever there is an update to the position, 2 points are calculated and a line is added to the map
(At the moment am using watchPosition but in future will get position every 30 seconds)
watchPos() {
let options = { timeout: 60000 }
this.watchId = navigator.geolocation.watchPosition((position) => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
this.setMap()
console.log(this.lat, this.lng)
}, this.errorHandler, options);
}
setMap() {
this.loc = new Microsoft.Maps.Location(this.lat, this.lng);
if (!this.initialised) {
this.oldLoc = this.loc;
this.initialised = true
this.map = new Microsoft.Maps.Map(this.driveMap.nativeElement, {
credentials: CONFIG.BING_API_KEY,
center: this.loc,
mapTypeId: Microsoft.Maps.MapTypeId.road,
navigationBarMode: 2,
zoom: this.zoom
});
this.user = new Microsoft.Maps.Pushpin(this.loc, { icon: '../images/icon.svg' });
this.map.entities.push(this.user);
// console.log(loc)
} else {
// Draw line
// from this.oldLoc to this.loc
let lineVertices = new Array(this.oldLoc, this.loc);
let line = new Microsoft.Maps.Polyline(lineVertices);
// Then set oldLoc to new loc
this.oldLoc = this.loc
this.map.entities.push(line);
this.map.setView({
center: this.loc
});
this.user.setLocation(this.loc);
}
}

Bing Maps has a snap to road API coming out near the end of next week which is specifically designed for this. You pass in your GPS coordinates and it will snap it to the roads, additionally, if you pass in an array of points you can also have it return a logical path that passes through the snapped points. Watch the Bing Maps blog for the announcement: https://blogs.bing.com/maps

Try Catch for error message in google maps api

I an using javascript and am getting an message that I have exceeded my daily request quota for this API. Is there a way to capture this error message in a try catch block so when I go over my quota I can execute another piece of code. I have seen several similar posts, but nothing that has been helpful. Here is my code.
(function (window, google, lat, lng) {
var options = {
center: {
lat: Number(lat),
lng: Number(lng)
},
zoom: 5,
disableDefaultUI: true,
scrollwheel: true,
draggable: false
},
element = document.getElementById('map-canvas')
var map = new google.maps.Map(element, options)
}(window, window.google, result[i]['latitude'], result[i]['longitude']));

Update
As per the documentation:
if you want to programmatically detect an authentication failure (for example to automatically send an beacon) you can prepare a callback function. If the following global function is defined it will be called when the authentication fails. function gm_authFailure() {//code}
Here is a list of errors that the gm_authFaliure function should be able to catch. It also mentions a OverQuotaMapError error.
As per the documentation:
if too many requests are made within a certain time period, the API returns an OVER_QUERY_LIMIT response code.
So you should check the response code. If the Google maps javascript library does not allow to access to the response code then I recommend making a HTTP request to the API to get the response code.
function initMap(window, google, lat, lng) {
var options = {
center: {
lat: Number(lat),
lng: Number(lng)
},
zoom: 5,
disableDefaultUI: true,
scrollwheel: true,
draggable: false
},
element = document.getElementById('map-canvas'),
map = new google.maps.Map(element, options);
};
function googleMapsCustomError(){
alert('Google Maps custom error triggered');
}
// if you want to respond to a specific error, you may hack the
// console to intercept messages.
// check if a message is a Google Map's error message and respond
// accordingly
(function takeOverConsole() { // taken from http://tobyho.com/2012/07/27/taking-over-console-log/
var console = window.console
if (!console) return
function intercept(method) {
var original = console[method]
console[method] = function() {
// check message
if(arguments[0] && arguments[0].indexOf('OverQuotaMapError') !== -1) {
googleMapsCustomError();
}
if (original.apply) {
// Do this for normal browsers
original.apply(console, arguments)
} else {
// Do this for IE
var message = Array.prototype.slice.apply(arguments).join(' ')
original(message)
}
}
}
var methods = ['error']; // only interested in the console.error method
for (var i = 0; i < methods.length; i++)
intercept(methods[i])
}())
<!DOCTYPE html>
<div id="map-canvas"></div>
<script>
// Notice i am defining this within my html file, just to be sure that this function exists before the Google Maps API is loaded.
window.gm_authFailure = function() {
// remove the map div or maybe call another API to load map
// maybe display a useful message to the user
alert('Google maps failed to load!');
}
window.showMap = function() {
var lat = -34.397,
lng = 150.644;
initMap(window, window.google, lat, lng);
};
</script>
<!-- We are passing an invalid API key. Also notice that we have defined 'callback' as 'showMap' which means that when the Google API JavaScript library is finished loading it will call the 'showMap' function. -->
<script src="https://maps.googleapis.com/maps/api/js?key=INVALID_API_KEY&callback=showMap"
async defer></script>

Yes, JavaScript supports try-catch blocks. Here is a sample implementation for your code:
(function (window, google, lat, lng) {
var options = {
center: {
lat: Number(lat),
lng: Number(lng)
},
zoom: 5,
disableDefaultUI: true,
scrollwheel: true,
draggable: false
},
element = document.getElementById('map-canvas')
try {
var map = new google.maps.Map(element, options)
} catch (error) {
// handle error
console.log(error.message);
} finally {
// optional cleanup code
}
}(window, window.google, result[i]['latitude'], result[i]['longitude']));

As per google documentation.
If you exceed the usage limits you will get an OVER_QUERY_LIMIT status
code as a response.
This means that the web service will stop providing normal responses
and switch to returning only status code OVER_QUERY_LIMIT until more
usage is allowed again. This can happen:
Within a few seconds, if the error was received because your application sent too many requests per second.
Within the next 24 hours, if the error was received because your application sent too many requests per day. The daily quotas are
reset at midnight, Pacific Time.
Please refer this link. It would be helpful.