javascript - How to add distance between to points in info window Using google maps -
var iconbase = 'content/images/'; var icons = { parking: { icon: iconbase + 'iconmonstr-car-21-24.png' }, library: { icon: iconbase + 'iconmonstr-fast-food-1-24.png' }, info: { icon: iconbase + 'iconmonstr-shopping-cart-3-24.png' }, hospital: { icon: iconbase + 'iconmonstr-building-38-24.png' } }; var markers = [{ title: 'aksa beach', lat: '19.1759668', lng: '72.79504659999998', description: 'aksa beach popular beach , vacation spot in aksa village @ malad, mumbai.', type: 'hospital', nearby: '' }, { title: 'juhu beach', lat: '19.0883595', lng: '72.82652380000002', description: 'juhu beach 1 of favourite tourist attractions situated in mumbai.', type: 'hospital', nearby: '' }, { title: 'girgaum beach', lat: '18.9542149', lng: '72.81203529999993', description: 'girgaum beach commonly known chaupati 1 of famous public beaches in mumbai.', type: 'hospital', nearby: '' }, { title: 'jijamata udyan', lat: '18.979006', lng: '72.83388300000001', description: 'jijamata udyan situated near byculla station famous mumbai (bombay) zoo.', type: 'hospital', nearby: '' }, { title: 'sanjay gandhi national park', lat: '19.2147067', lng: '72.91062020000004', description: 'sanjay gandhi national park large protected area in northern part of mumbai city.', type: 'hospital', nearby: '' } ]; window.onload = function() { loadmap(); } function loadmap() { var directionsservice = new google.maps.directionsservice(); var mapoptions = { center: new google.maps.latlng(markers[0].lat, markers[0].lng), zoom: 10, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("dvmap"), mapoptions); //create , open infowindow. var infowindow = new google.maps.infowindow(); (var = 0; < markers.length; i++) { var data = markers[i]; var mylatlng = new google.maps.latlng(data.lat, data.lng); var marker = new google.maps.marker({ position: mylatlng, map: map, title: data.title, icon: icons[data.type].icon, }); var res = calcroute(); (function(marker, data) { google.maps.event.addlistener(marker, "click", function(e) { infowindow.setcontent("<div style ='width:200px;min-height:40px' class='aa'>" + data.description + res + "</div>"); infowindow.open(map, marker); }); })(marker, data); } } function calcroute() { var start = { lat: 50.087, lng: 14.421 }; var end = { lat: 19.0883595, lng: 72.79504659999998 }; var request = { origin: start, destination: end, travelmode: 'driving' }; directionsservice.route(request, function(response, status) { if (status == 'ok') { return response.destination; } }); //attach click event marker. } window.onload = function() { loadmap(); } function loadmap() { var directionsservice = new google.maps.directionsservice(); var mapoptions = { center: new google.maps.latlng(markers[0].lat, markers[0].lng), zoom: 10, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("dvmap"), mapoptions); //create , open infowindow. var infowindow = new google.maps.infowindow(); (var = 0; < markers.length; i++) { var data = markers[i]; var mylatlng = new google.maps.latlng(data.lat, data.lng); var marker = new google.maps.marker({ position: mylatlng, map: map, title: data.title, icon: icons[data.type].icon, }); var res = calcroute(); (function(marker, data) { google.maps.event.addlistener(marker, "click", function(e) { infowindow.setcontent("<div style ='width:200px;min-height:40px' class='aa'>" + data.description + res + "</div>"); infowindow.open(map, marker); }); })(marker, data); } } function calcroute() { var start = { lat: 50.087, lng: 14.421 }; var end = { lat: 19.0883595, lng: 72.79504659999998 }; var request = { origin: start, destination: end, travelmode: 'driving' }; directionsservice.route(request, function(response, status) { if (status == 'ok') { return response.destination; } }); //attach click event marker. }
body { font-family: arial; font-size: 10pt; }
<script defer src="https://maps.googleapis.com/maps/api/js?key=aizasyamjsuqoctzbxgx460cxrob4glzoarowos&callback=initmap"> </script> <div id="dvmap" style="width: 1000px; height: 600px"> </div>
wiki
Comments
Post a Comment