Place/Address
The most basic is a simple destination. This will link directly to an address. Here are two possible ways:
https://www.google.com/maps/place/760+West+Genesee+Street+Syracuse+NY+13204https://maps.google.com?q=760+West+Genesee+Street+Syracuse+NY+13204Directions (with empty starting point)
The following will link to an address and automatically focus the cursor on the starting location input. The user just types in where they are coming from and the directions are generated.
https://maps.google.com?daddr=760+West+Genesee+Street+Syracuse+NY+13204Directions (with set starting point)
No user input is required as there is a starting and ending direction pre-propagated. Here are a few possible methods for doing so:
https://www.google.com/maps/dir/760+West+Genesee+Street+Syracuse+NY+13204/314+Avery+Avenue+Syracuse+NY+13204https://maps.google.com?saddr=760+West+Genesee+Street+Syracuse+NY+13204&daddr=314+Avery+Avenue+Syracuse+NY+13204Directions (detect user’s current location as starting point)
By simply including “Current Location” in the starting point input field, Google will detect the user’s location and automatically generate directions based on where they are right now. The string “My Location” can also work, but “Current Location” seems to have a higher success rate.
https://www.google.com/maps/dir/Current+Location/760+West+Genesee+Street+Syracuse+NY+13204https://maps.google.com?saddr=Current+Location&daddr=760+West+Genesee+Street+Syracuse+NY+13204Directions (with latitude / longitude coordinates)
Instead of using an address, you could also include latitude and longitude coordinates for the destination (or starting point). In this example, we’re also using “Current Location” as the starting point.
https://www.google.com/maps/dir/Current+Location/43.12345,-76.12345https://maps.google.com?saddr=Current+Location&daddr=43.12345,-76.12345Directions (multiple destinations from set location)
Using the updated syntax, we can just keep adding destinations to the URL!
https://www.google.com/maps/dir/760+W+Genesee+St+Syracuse+NY+13204/314+Avery+Ave+Syracuse+NY+13204/9090+Destiny+USA+Dr+Syracuse+NY+13204Query Search
You could link to a search query of nearby places of an address or in this case coordinates. Change the “q=food” to whatever search you’d like. You can control the default zoom level with “,14z” or "&z=14 at the end of the URL (Zoom range is 0–19. 0 = Furthest Away, 19 = Closest In).
https://www.google.com/maps/search/food/43.12345,-76.12345,14zhttps://maps.google.com?ll=43.12345,-76.12345&q=food&z=14Destination Query
If you don’t know the address or GPS coordinates of the destination (or starting point for that matter), you could include a business name as the field instead and let Google determine what you mean. Obviously, you need to be careful with this one because it could serve a different location than you intend.
https://www.google.com/maps/dir/Current+Location/Pinckney+Hugo+Grouphttps://maps.google.com?saddr=Current+Location&daddr=Pinckney+Hugo+GroupMarker
var GM = {};
/**
* Default options
*/
GM.options = {
lat: 50.0835494,
lng: 14.4341414,
zoom: 11,
maxZoom: 17,
el: 'map',
map: undefined,
markers: []
};
/**
* Init map
*/
GM.init = function () {
var options = this.options;
var coords = {lat: options.lat, lng: options.lng};
options.map = new google.maps.Map(document.getElementById(options.el), {
zoom: options.zoom,
center: coords
});
};
/**
* Add marker to map
*
* @param {object} coords
* @param {string} title
* @param {object} obj
*/
GM.addMarker = function (coords, title, obj) {
var content;
var map = this.options.map;
var marker = new google.maps.Marker({
position: coords,
map: map,
title: title
});
if (obj.reservations > 0) {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
content = ''
+ '<div class="google-map">'
+ '<h3>#' + obj.identifier + ' <span class="label label-danger">obsazeno</span></h3>'
+ '<p>' + obj.description + '</p>'
+ '</div>';
} else {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
content = ''
+ '<div class="google-map">'
+ '<h3>#' + obj.identifier + ' <span class="label label-success">volno</span></h3>'
+ '<p>' + obj.description + '</p>'
+ '<div><a href="' + obj.link.reserve + '" class="btn btn-primary">Rezervovat</a></div>'
+ '</div>';
}
// Show info window (if can)
var info = new google.maps.InfoWindow({
content: content
});
marker.addListener('click', function () {
info.open(map, marker);
});
// Append to array
this.options.markers.push(marker);
};
/**
* Remove markers from map
*/
GM.removeMarkers = function () {
var markers = this.options.markers;
markers.forEach(function (e) {
e.setMap(null);
});
// Remove from array
this.options.markers = [];
};
/**
* Center and zoom to markers
*/
GM.fit = function () {
var markers = this.options.markers;
var map = this.options.map;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
// Handle max zoom
if (map.getZoom() > this.options.maxZoom) {
map.setZoom(this.options.maxZoom);
}
};
/**
* Center map
*/
GM.center = function () {
this.options.map.setCenter({lat: this.options.lat, lng: this.options.lng});
};
/**
* Reset map and center
*/
GM.reset = function () {
this.options.map.setZoom(this.options.zoom);
this.options.map.setCenter({lat: this.options.lat, lng: this.options.lng});
};