How can i display multiple markers on a google map without having any geo code?
You should look into gmaps.js. It's wrapper around the google maps api, but "with a lot less pain and more fun":
map.addMarker({
lat: -12.043333,
lng: -77.028333,
title: 'Lima',
click: function(e) {
alert('You clicked in this marker');
}
});
Example
Related
I already know on how to integrate a Google Maps frame on my website pinning a specific address. That is pretty well documented in the Google Maps API docs.
However, I currently have a client who organizes a kind of walking-competition which has multiple routes. This client would love to show the different routes of these walks on his website by using some kind of Google Maps iframe.
Googling "custom route on website Google Maps API" only shows results displaying how to create custom routes in the Google Maps-application.
So, my question is:
Is it possible to show custom routes in a Google Maps iframe?
The routes are fixed, so the user does not have any input.
I basically just want to make some routes in Google Maps, and display these on my website using iframes.
If Google Maps does not have a way to show a custom route on your website, is there another API or solution?
Is this possible? Thanks.
No with GoogleMap Embed API
You can't display custom route on GoogleMap iframe. GoogleMap iframe is allow you to display a map without using javascript and it's relative to GoogleMap Embed API. All the possibilities for this API are documented here. Attention, when you said :
That is pretty well documented in the Google Maps API docs.
it's a reference of the GoogleMap Javascript API not the GoogleMap Embed API.
Yes, with GoogleMap Javascript API
It exist another API solution for this called GoogleMap Javascript API. By using it, if you want to display custom route on your map you can use custom polylines. You just need to select all of the latLng object of the waypoints of your custom route and set up a polyline like this :
// Coordonates of your route
const customRouteCoordonates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
// ... and a lot of more to be more precise
];
//Your map
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
//Set up your polyline
const routePath= new google.maps.Polyline({
path: customRouteCoordonates ,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
routePath.setMap(map);
}
I am trying to confirm if one can place image in a google map street view and get a response when clicked
Searched a lot, also at https://developers.google.com/maps/documentation/javascript/streetview
but couldn't find anything
if it's possible than can anyone post an instruction.
You can try using a custom Marker with a custom image:
var testMarker = new google.maps.Marker({
position: {lat: 40.729681, lng: -73.991138},
map: map,
icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Test'
});
testMarker.addListener('click', function() {
console.log("test");
});
Hope this helps!
How can I draw a line between two google maps native markers?
In my project, I need one dynamic marker and one fixed marker.
addMarker() {
this.map.addMarker({
title: 'My Marker',
icon: 'blue',
animation: 'DROP',
position: {
lat: this.place.lat,
lng: this.place.lng
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
alert('Marker Clicked');
});
});
}
2nd marker:
addMarker2() {
this.map.addMarker({
title: 'My Marker',
icon: 'blue',
animation: 'DROP',
position: {
lat: -33,
lng: 773231
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
alert('Marker Clicked');
});
});
}
and how can I show route between the two markers using a line?
Thanks in advance,
The documentation for the Polyine class for cordova-plugin-googlemaps indicates you would add a Polyline between your markers like this:
let points = [
{
lat: this.place.lat,
lng: this.place.lng
},
{
lat: -33,
lng: 773231
}
];
this.map.addPolyline({
points: points,
'color' : '#AA00FF',
'width': 10,
'geodesic': true
});
This will draw a straight (geodesic) line between the markers.
However in your question you asked "how can I show route between the two markers using a line".
A travel route is of course not as simple as drawing a straight line from A to B - if you want to draw a detailed transport route, then it's a bit more complicated:
The Google Maps Directions API enables you to calculate directions between locations and returns a JSON response which contains a detailed travel route, including an encoded polyline of the route which you can draw straight onto your map. The catch is that the Google APIs endpoint doesn't support CORS headers so if you make a request direct from your Cordova app, the Webview will block the response.
So instead I would suggest including the Google Maps Javascript SDK in your Cordova app (even though you're using the native Google Maps plugin to show the maps) since this includes a directions service which can access the Google Maps Directions API and is not inhibited by CORS so can be used in your Cordova app.
Similar to the Google Maps Directions API endpoint, it returns a JSON response detailing a travel route between locations, including an encoded polyline.
You can easily decode the polyline using a library such as mapbox polyline then draw the resulting set of coordinates as a Polyline on your native Google Map to show a detailed travel route.
I have to put a Map from Google (Google Maps or GoogleMyMaps) in a website. I need the map to show a lot of different places all over my country (about 200 places). I already have a GoogleMyMaps with all the places.
But I need the map to have a zoom limitation/restriction : I want people NOT TO KNOW exactly where the places are, which means the zoom must stop before it gets accurate enough.
I know you can control the zoom with GoogleMaps JS API with something like
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
But I dont know how to add places on a Google Maps (still I have them all on a GoogleMyMaps).
Thank you for your time
Thank you everyone for your help.
So most of the time, GoogleMyMaps uses .KML files (as import or export), and it is possible to upload the data from a .KML file into Google Maps.
Here is an example :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 1, lng: 1}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'THE_KML_FILE_URL',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
async defer></script>
But note that the KML file has to be online, it does not work on local (Google's API needs to have access to your file).
Then you can customize your Google Map using Google Map Javascript API (https://developers.google.com/maps/documentation/javascript/tutorial).
Thank you everyone for your time
I've just add a google maps autocomplete (the one that suggest you, and store all infos like route, city, administrative fields etc) fields in my website.
My only concern is that every time my users reload the page and highlight this field, the browser ask the permission to handle user's location.
I really don't need it and i would like to disable it but i can't find this option in the documentation.
Someone could help me out?
Thanks
The autocomplete service doesn't request your position, something outside of that is doing it.
In at least one of Google's examples, that request is made by the client code:
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}