C# - FRENCH - VisualStudio WebBrowser with Google API DirectionsService.Route() - javascript

hello all I created a TestProject to use the Google MAP Direction.Route() on a WebBrowser in visual studio 2015... But i have one problem.. The 'route' dont work with my 'WebBrowser' on VisualStudio2015 but it's working in 'Google Chrome','Internet Explorer' and 'FireFox'.
I dont understand why.
The problem ( Left with 'WebBrowser' Right 'Google chrome, firefox, internet explorer' ) :
Picture : My problem :
The code HTML :
<!DOCTYPE html>
<html>
<head>
<style>
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<!-- Test placement des points Panterga et chez moi -->
<script>
function PutPoints()
{
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var map = new google.maps.Map(document.getElementById('map'),
{
center: "Paris, fr",
zoom: 7
});
directionsDisplay.setMap(map);
directionsService.route(
{ origin: "Paris, fr", destination: "Marseille, fr", travelMode: 'DRIVING' },
function (reponse, result) { directionsDisplay.setDirections(reponse); }
);
}
</script>
<script async defer
src = 'https://maps.googleapis.com/maps/api/js?v=3.33&signed_in=true&language=fr&callback=PutPoints'>
</script>
</body>
</html>

Related

How to get a draggable waypoint's location from google directions result

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lokacija Partnerja</title>
<!--stili za elemente na mapi-->
<style type="text/css">
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
/* start styles for the ContextMenu */
.context_menu {
background-color: white;
border: 1px solid gray;
}
.context_menu_item {
padding: 3px 6px;
}
.context_menu_item:hover {
background-color: #CCCCCC;
}
.context_menu_separator {
background-color: gray;
height: 1px;
margin: 0;
padding: 0;
}
/* end styles for the ContextMenu */
#map_container {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=quarterly&key=#YOURAPIKEY#&sensor=false"></script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map_container'), {
zoom: 4,
center: {
lat: -24.345,
lng: 134.46
} // Australia.
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
directionsDisplay);
}
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: [{
location: 'Adelaide, SA'
}, {
location: 'Broken Hill, NSW'
}],
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var route = result.routes[0];
for (var ij = 0; ij < route.legs[0].via_waypoints.length; ij++) {
counter = counter + 1;
//alert(counter + ", " + route.legs[i].via_waypoints[ij].B + ", " + route.legs[i].via_waypoints[ij].k)
route.legs[0].via_waypoints[ij].k,
route.legs[0].via_waypoints[ij].D
}
}
</script>
</head>
<body onload="initMap()">
<div id="map_container"></div>
</body>
</html>
I am trying to capture the location of a draggable waypoint in a google direction javascript API, so I can save it the database and load the same directions later.
I try to acces the waypoint's location via result.routes[0].legs[0].via_waypoints[0], which offers me nothing useful - lat and lng object are "empty" instead of containing geolocation (same goes for result.routes[0].legs[0].via_waypoint[0].location.
I have a remark in my code to access waypoint's geolocation via result.routes[0].legs[0].via_waypoints[0].k and result.routes[0].legs[0].via_waypoints[0].D, which does not work. I found on stackoverflow a similar question from 2011, which suggests to use location.wa and location.ya, which also does not work.
I've added a code snippet, you should replace #YOURAPIKEY# with your Google API key for the example to work. It's a slightly modified example from Google's documentation
Can anyone help me with this?
Each leg of your route is a set of steps and in the case you submitted, each leg corresponds to directions between one of your stops (origin, waypoints, destination).
leg[0] from Perth to Adelaide
leg[1] from Adelaide to Broken Hill
leg[2] from Broken Hill to Sydney
So you won't have anything in the via_waypoints prop.
You need to set stopover: false in your waypoints if you want them not considered as a real stop. Then you will get the via_waypoints property populated for each leg (if more than one).
waypoints: [{
location: 'Adelaide, SA',
stopover: false
}, {
location: 'Broken Hill, NSW',
stopover: false
}],
You can then iterate though via_waypoints and get the coordinates.
lat and lng are methods, not properties, so you need to call them, for example:
let firstWaypointLat = result.routes[0].legs[0].via_waypoints[0].lat();
Example below on how to get the waypoints coordinates:
function initMap() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {
lat: -24.345,
lng: 134.46
} // Australia.
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
directionsDisplay);
}
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: [{
location: 'Adelaide, SA',
stopover: false
}, {
location: 'Broken Hill, NSW',
stopover: false
}],
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
function computeTotalDistance(result) {
let leg = result.routes[0].legs[0];
for (let i=0; i<leg.via_waypoints.length; i++) {
console.log('Waypoint ' + i + ' coords: ' + leg.via_waypoints[i].lat() + ', ' + leg.via_waypoints[i].lng());
}
}
initMap();
#map-canvas {
height: 180px;
}
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Google MyMaps to Google Maps API

I am trying to recreate the following map, made using Google MyMaps, by using Google Maps API
Anyone know the best way to do this? Have the following code at the moment but doesn't look great
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Search for up to 200 places with Radar Search</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
var infoWindow;
var service;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 54.607868,
lng: -5.926437
},
zoom: 10,
styles: [{
stylers: [{
visibility: 'simplified'
}]
}, {
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}]
});
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
// The idle event is a debounced event, so we can query & listen without
// throwing too many requests at the server.
map.addListener('idle', performSearch);
}
function performSearch() {
var request = {
bounds: map.getBounds(),
keyword: 'best view'
};
service.radarSearch(request, callback);
}
function callback(results, status) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
console.error(status);
return;
}
for (var i = 0, result; result = results[i]; i++) {
addMarker(result);
}
}
function addMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(10, 17)
}
});
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(place, function(result, status) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
console.error(status);
return;
}
infoWindow.setContent(result.name);
infoWindow.open(map, marker);
});
});
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIcOfMnc85XkuJmotWkLL4mthAHqlUuWA&callback=initMap&libraries=places,visualization" async defer></script>
</body>
</html>
use a saved google my maps and share it from your google drive

Google Maps API v3 WEB JS direction between two static markers

I need some help with the Google Maps WEb JS API. I'm diving into it for the first time and now I'm stuck.
I want to set a static direction of two static markers on a Google Map.
I'm trying to write the code in OOP.
The map is getting load on my webpage, but I'm not getting to see the "markers" and the "direction".
Please some help and advice!
var WEB = WEB || {};
(function() {
'use strict'
//controller init object
WEB.controller = {
init: function() {
// initialize APP objects
google.maps.event.addDomListener(window, 'load', WEB.googleMaps.init());
}
};
WEB.googleMaps = {
init: function() {
WEB.googleMaps.directionsDisplay();
console.log('1. init directionsDisplay');
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.295042, 4.867158),
zoom: 14,
maxZoom: 15,
minZoom: 13,
draggable: false
});
console.log('2. init map');
WEB.googleMaps.directionsDisplay(map);
console.log('3. init directionsDisplay in map');
console.log('4. init calc route');
WEB.googleMaps.calcRoute();
},
directionsDisplay: function() {
new google.maps.DirectionsRenderer();
},
directionsService: function(){
new google.maps.DirectionsService();
},
calcRoute: function() {
WEB.googleMaps.directionsService();
console.log('5. init directionsService');
var start = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);
var end = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);
console.log('6. set directions', start, end);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
console.log('7. put directions in the service', request);
WEB.googleMaps.directionsService(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log('7. DirectionsStatus is OK');
WEB.googleMaps.directionsDisplay(response);
}
});
}
};
WEB.controller.init();
})();
<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- GOOGLE MAPS API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
</head>
<body class="">
<header class="">
</header>
<main class="">
<div id="map-canvas" style="width: 100%; height: 500px; margin:0; padding:0; border:0;">
</div>
</main>
</body>
</html>
You need to do something more like this.
WEB.googleMaps = {
init: function() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(52.295042, 4.867158),
zoom: 14,
maxZoom: 15,
minZoom: 13,
draggable: false
});
var directionsDisplay = WEB.googleMaps.getDirectionsDisplay(map);
WEB.googleMaps.calcRoute(directionsDisplay);
},
getDirectionsDisplay: function(map) {
return new google.maps.DirectionsRenderer({map: map});
},
getDirectionsService: function(){
return new google.maps.DirectionsService();
},
calcRoute: function(directionsDisplay) {
var directionsService = WEB.googleMaps.getDirectionsService();
var start = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);
var end = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
};
WEB.controller.init();
It helps to read this carefully:
https://developers.google.com/maps/documentation/javascript/directions

Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)

In a web page I have multiple google maps generated in a loop. And I am using the google directions api to display directions on each of the maps. The problem is that this code is displaying all the directions on the last map. Have any ideas?:
var currentPosition = new google.maps.LatLng(44.462691,26.1215866);
var directionsService = new google.maps.DirectionsService();
function DisplayLocations(){
$("#mapsContainer").empty();
for(var i=0;i<locationsDisplayed;i++){
var location=locationsArray[i];
$("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>');
var myOptions = {
zoom: 14,
center: currentPosition,
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: false,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('ImageMap'+i),myOptions);
var request = {
origin: currentPosition,
destination: location.position,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
RenderDirection(map,response);
}
});
}
}
function RenderDirection(map,result) {
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
}
Yes, your directionsService gets overwritten in the loop.
What you can do, is chain the requests. So, whenever a response returns, you trigger the next request.
<html>
<head>
<title>Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var maps = []; // we will copy (the reference to) every map to this array, so we can always access them at will
var locationsArray = [
{position: new google.maps.LatLng(44.460, 26.120) },
{position: new google.maps.LatLng(44.461, 26.121) },
{position: new google.maps.LatLng(44.462, 26.122) },
{position: new google.maps.LatLng(44.463, 26.123) }
]
var currentPosition = new google.maps.LatLng(44.462691, 26.1215866);
function DisplayLocations() {
$("#mapsContainer").empty();
nextLocation(0); // we don't use a for-loop; we wait for a response to trigger the next request
function nextLocation(i) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var location=locationsArray[i];
$("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>');
var myOptions = {
zoom: 14,
center: currentPosition,
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: false,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('ImageMap'+i), myOptions);
maps.push(map);
var request = {
origin: currentPosition,
destination: location.position,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
RenderDirection(maps[i++], response, directionsDisplay);
// if there is a next location, we will fire a new request
if (locationsArray[i]) {
nextLocation(i);
}
}
});
}
}
function RenderDirection(map, response, directionsDisplay) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
}
google.maps.event.addDomListener(window, 'load', DisplayLocations);
</script>
<style>
.map {
height: 210px;
width: 260px;
float: left;
margin: 2px;
}
</style>
</head>
<body>
<div class="map" id="mapsContainer0"></div>
<div class="map" id="mapsContainer1"></div>
<div class="map" id="mapsContainer2"></div>
<div class="map" id="mapsContainer3"></div>
</body>

Error when adding HTML to google site, Google Maps API

I used the Fusion TablesLayer Wizard to layer three separate fusion tables and put it on my google site HERE. I copied and pasted the HTML code from the wizard into an HTML box on my site. But in the HTML Properties window it gives me this error: 12+9 - 58: failed to load external url js?sensor=false- I also tested this html in W3 schools 'TryIt' and it works fine. How do I get it to work on the site?
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:900px; height:900px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
var layer_1;
var layer_2;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(39.34723863007487, -100.37501562500003),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "1qYb8PKCG3P7plw8aFVVpn44RgQI0CNaIuOFhs9RV"
},
map: map,
styleId: 2,
templateId: 3
});
layer_1 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "11PndImUQQPvqjGiNKx87MRrTe71sLHnkGxo9bacC"
},
map: map,
styleId: 2,
templateId: 3
});
layer_2 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "12bzY7A88cndb6bFS43jXSbYqt1AUPNbprYOGgJxj"
},
map: map,
styleId: 2,
templateId: 3
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Do you need to include your API key? I've never really tried, but I don't think Google Maps lets you make anonymous calls. Here's the script from the documentation:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

Categories