Я хочу поделиться своим URL на кнопке общего доступа WhatsApp. У меня есть сомнения в обмене Google Map для WhatsApp. Как динамически c поделиться начальным и конечным местоположением моих карт Google с помощью кнопки общего доступа WhatsApp?
Я создал кнопку общего доступа WhatsApp, но понятия не имею, как связать код. Я использовал HTML и JavaScript, но при совместном просмотре просматривается только соответствующая страница, а не точная информация (то есть местоположение не просматривается).
Во время обмена мне нужны карты Google и соответствующая информация для поиска.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- css section strat-->
<style>
.w3_whatsapp_btn_small {
font-size: 12px;
background-size: 16px;
background-position: 5px 2px;
padding: 3px 6px 3px 25px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 p-0 full-height">
<div class="col-md-4 p-0 left-column">
<div class="col-md-12 p-0 startEnd-bg">
<div class="logo-section">
<div class="col-md-4 p-0">
<img src="images/gps-and-gprs-vehicle-tracking-system.png" title="gps and gprs vehicle tracking system in haryana" alt="student tracking system in chennai">
</div>
<div class="col-md-4"><span><select class="logo-chennai"><option>chennai</option></select></span></span></div>
<div class="col-md-4 logo-Alanuage"><span class="logo-Alanuage">A<i class="fa fa-language" style="color:#fff;"></i></span></div>
</div>
<form class="form-horizontal form-padding" role="form">
<div class="form-group form-group1">
<!-- <label class="control-label col-sm-2" for="start"></label> -->
<div class="col-sm-12">
<input type="text" class="form-control" id="start" placeholder="Start" value="">
</div>
</div>
<div class="form-group form-group1">
<!-- <label class="control-label col-sm-2" for="end"></label> -->
<div class="col-sm-12">
<input type="text" class="form-control" id="end" placeholder="End" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-default" id="submit">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-md-12 p-0 suggestedroutes-sec">
<div class="col-md-6"><span style="float:left">Suggested Routes</span></div>
<div class="col-md-6"><a href="" class="share">
<span style="font-size:14px; float:right"> Share <i class="fa fa-share-alt"></i></span>
</a>
</div>
</div>
<div class="col-md-12 p-0">
<hr>
<div id="legs-section">
<div class="media">
<div class="media-left">
<p id="legs-text"></p>
</div>
</div>
</div>
<div class="media">
<div class="bus-logo-section">
<p class="boxed" id="bus-logo"></p>
</div>
<div class="media-body">
<p class="media-heading" id="media-time"></p>
<!-- <p id="bus-number"></p> -->
<p id="steps-text"></p>
</div>
</div>
</div>
<!-- <div class="col-md-12 p-0"> -->
<!-- <div id="1"> -->
<!-- <div class="media"> -->
<!-- <div class="bus-logo-section"> -->
<!-- <p class="boxed" id="bus-logo"></p> -->
<!-- </div> -->
<!-- <div class="media-body"> -->
<!-- <p class="media-heading" id="media-time"></p> -->
<!-- <!-- <p id="bus-number"></p> -->
<!-- <p id="steps-text"></p> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
</div>
<div class="col-md-8 p-0">
<div id="map" style="height:400px;width:100%;" ></div>
</div>
</div>
</div>
</div>
<!-- script section start -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- javascript code-->
<script>
function initMap() {
var directionsRenderer = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 20.593684, lng: 78.96288}
});
directionsRenderer.setMap(map);
var input = document.getElementById('start');
var input1 = document.getElementById('end');
var autocomplete = new google.maps.places.Autocomplete(input);
var autocomplete1 = new google.maps.places.Autocomplete(input1);30+
autocomplete.bindTo('bounds', map);
autocomplete1.bindTo('bounds', map)
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsRenderer);
});
autocomplete.addListener('place_changed', function() {
<!-- infowindow.close(); -->
<!-- marker.setVisible(false); -->
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
});
autocomplete1.addListener('place_changed', function() {
var place = autocomplete1.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
});
}
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'TRANSIT'
}, function(response, status) {
console.log(response);
if (status == 'OK') {
directionsRenderer.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
// For each route, display summary information.
<!-- legs var section -->
var start_address=route.legs[0].start_address;
var end_address=route.legs[0].end_address;
var duration=route.legs[0].duration.text;
var distance=route.legs[0].distance.text;
var departure_time=route.legs[0].departure_time.text;
var arrival_time=route.legs[0].arrival_time.text;
<!-- steps var section -->
var arrivalStop=route.legs[0].steps[1].transit.arrival_stop.name;
var arrivalTime=route.legs[0].steps[1].transit.arrival_time.text;
var departureStop=route.legs[0].steps[1].transit.departure_stop.name;
var departureTime=route.legs[0].steps[1].transit.departure_time.text;
var numStops=route.legs[0].steps[1].transit.num_stops;
console.log("numStops"+numStops);
var busIcon=route.legs[0].steps[1].transit.line.vehicle.icon;
var vehicleName=route.legs[0].steps[1].transit.line.vehicle.name;
var vehicleType=route.legs[0].steps[1].transit.line.vehicle.type;
var vehicleNum_stops=route.legs[0].steps[1].transit.num_stops;
var busNo=route.legs[0].steps[1].transit.line.short_name;
console.log(busNo);
var legs=(start_address+'<br>'+end_address+"<br>Duration: "+duration+"<br>Distance: "+distance+"<br>Departure Time: "+departure_time+"<br>Arrival Time: "+arrival_time+"<br>Num Stops:"+numStops);
<!-- var legs=(start_address+'<br>'+end_address); -->
var steps=(arrivalStop+arrivalTime+departureStop+departureTime+numStops);
var bus=("<span class='transit'><img src='"+busIcon+"' alt='Bus Logo'></span><sapn>"+busNo+"</span>");
<!-- var time=("<span class='pull-left'>"+departureTime+'-'+arrivalTime+"</span><span class='pull-right'>"+duration+"</span"); -->
<!-- <div class="boxed" style="border-bottom-color: #ffd700"><span class="transit"><img src="/images/routeTypes/bus.svg"></span><span class="text">70B EXT</span><span class="seperator"> / </span><span class="text">70C</span><span class="seperator"> / </span><span class="text">111</span><span class="seperator"> / </span><span class="text">114</span><span class="seperator"> / </span><span class="text">70</span></div> -->
document.getElementById("legs-text").innerHTML=legs;
document.getElementById("bus-logo").innerHTML=bus;
<!-- document.getElementById("media-time").innerHTML=time; -->
document.getElementById("bus-number").innerHTML=busNumber;
document.getElementById("steps-text").innerHTML=steps;
summaryPanel.innerHTML = '';
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
<!-- summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + -->
<!-- '</b><br>'; -->
<!-- summaryPanel.innerHTML += route.legs[i].start_address + ' to '; -->
<!-- summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; -->
<!-- summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; -->
<!-- summaryPanel.innerHTML += route.legs[i].duration.text + '<br><br>'; -->
<!-- summaryPanel.innerHTML += route.legs[i].arrival_time.text + '<br><br>'; -->
<!-- summaryPanel.innerHTML += route.legs[i].steps[i].distance.text+ '<br><br>'; -->
<!-- summaryPanel.innerHTML += route.legs[i].steps[i].duration.text+ '<br><br>'; -->
<!-- summaryPanel.innerHTML += route.legs[i].steps[1].transit.departure_time.text+ '<br><br>'; -->
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
<!-- whatapp share -->
$(document).ready(function() {
$('.whatsapp').on("click", function(e) {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var input = document.getElementById('start');
var input1 = document.getElementById('end');
var article = input+input1;
alert(article);
var article = $(this).attr("data-text");
var weburl = $(this).attr("data-link");
var whats_app_message = encodeURIComponent(document.URL);
var whatsapp_url = "whatsapp://send?text="+whats_app_message;
window.location.href= whatsapp_url;
}
else{
alert('You Are Not On A Mobile Device. Please Use This Button To Share On Mobile');
}
});
});
</script>
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmXhcX8z4d4GxPxIiklwNvtqxcjZoWsWU&libraries=places&callback=initMap">
</script>
<!-- whatapp share button-->
<a data-text="hi how are u" data-link="http://w3lessons.info" class="whatsapp w3_whatsapp_btn w3_whatsapp_btn_small">Share</a>
</body>
</html>