Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var map;
- function initMap() {
- //var bounds = new google.maps.LatLngBounds();
- var origin_place_id = null;
- var destination_place_id = null;
- var myCenter=new google.maps.LatLngBounds();
- var directionsDisplay;
- var directionsService = new google.maps.DirectionsService();
- var travel_mode = google.maps.TravelMode.WALKING;
- map = new google.maps.Map(document.getElementById('map'), {
- mapTypeControl: false,
- center: myCenter,
- zoom: 7,
- mapTypeId:google.maps.MapTypeId.ROADMAP
- });
- var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
- this.setZoom(8);
- google.maps.event.removeListener(boundsListener);
- });
- google.maps.event.addDomListener(document.getElementById('go'), 'click',route);
- var directionsService = new google.maps.DirectionsService;
- var directionsDisplay = new google.maps.DirectionsRenderer;
- directionsDisplay.setMap(map);
- var origin_input = document.getElementById('origin-input');
- var destination_input = document.getElementById('destination-input');
- var modes = document.getElementById('mode-selector');
- map.controls[google.maps.ControlPosition.TOP_LEFT].push(modes);
- var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
- origin_autocomplete.bindTo('bounds', map);
- var destination_autocomplete = new google.maps.places.Autocomplete(destination_input);
- destination_autocomplete.bindTo('bounds', map);
- function setupClickListener(id, mode) {
- var radioButton = document.getElementById(id);
- radioButton.addEventListener('click', function() {
- travel_mode = mode;
- });
- }
- setupClickListener('changemode-walking', google.maps.TravelMode.WALKING);
- setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT);
- setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING);
- function expandViewportToFitPlace(map, place) {
- if (place.geometry.viewport) {
- map.fitBounds(place.geometry.viewport);
- } else {
- map.setCenter(place.geometry.location);
- map.setZoom(17);
- }
- }
- origin_autocomplete.addListener('place_changed', function() {
- var place = origin_autocomplete.getPlace();
- if (!place.geometry) {
- window.alert("Autocomplete's returned place contains no geometry");
- return;
- }
- expandViewportToFitPlace(map, place);
- origin_place_id = place.place_id;
- route(origin_place_id, destination_place_id, travel_mode,
- directionsService, directionsDisplay);
- });
- destination_autocomplete.addListener('place_changed', function() {
- var place = destination_autocomplete.getPlace();
- if (!place.geometry) {
- window.alert("Autocomplete's returned place contains no geometry");
- return;
- }
- expandViewportToFitPlace(map, place);
- $('#go').click(function(){
- var origin_input = document.getElementById('origin-input').value;
- var res = origin_input.split(",");
- var bc = res[0];
- var destination_input = document.getElementById('destination-input').value;
- var res = destination_input.split(",");
- var bd = res[0];
- destination_place_id = place.place_id;
- route(origin_place_id, destination_place_id, travel_mode,
- directionsService, directionsDisplay);
- });
- });
- $('#mode-selector').hide();
- $('#go').click(function(){
- //$('#go').hide(250);
- $('#mode-selector').show(250);
- });
- function route(origin_place_id, destination_place_id, travel_mode,
- directionsService, directionsDisplay) {
- if (!origin_place_id || !destination_place_id) {
- return;
- }
- directionsService.route({
- origin: {'placeId': origin_place_id},
- destination: {'placeId': destination_place_id},
- travelMode: travel_mode
- },
- function(response, status) {
- if (status === google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- } else {
- window.alert('Directions request failed due to ' + status);
- }
- });
- }
- var markers = [
- ['Faisalabad, Pakistan', 31.4187,73.0791],
- ['Multan, Pakistan', 30.1984,71.4687],
- ['Lahore, Pakistan', 31.5546,74.3572],
- ['Sahiwal, Pakistan', 30.6612,73.1086]
- ];
- directionsDisplay = new google.maps.DirectionsRenderer();
- directionsDisplay.setMap(map);
- //marker.setMap(map);
- var infoWindow = new google.maps.InfoWindow(), marker, i;
- // Loop through our array of markers & place each one on the map
- for( i = 0; i < markers.length; i++ ) {
- var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
- myCenter.extend(position);
- marker = new google.maps.Marker({
- position: position,
- map: map,
- title: markers[i][0]
- });
- map.fitBounds(myCenter);
- var route = 0;
- var pos_source=0;
- var pos_destination=0;
- google.maps.event.addListener(marker, 'click', (function(marker, i) {
- return function() {
- route++;
- if(route==1)
- {
- pos_source = this.position;
- $('mode-selector').hide();
- }
- if(route==2)
- {
- pos_destination = this.position;
- route = 0;
- var start = new google.maps.LatLng(pos_source.lat(), pos_source.lng());
- var end = new google.maps.LatLng(pos_destination.lat(), pos_destination.lng());
- var request = {
- origin: start,
- destination: end,
- travelMode: google.maps.TravelMode.DRIVING
- };
- $('mode-selector').show();
- directionsService.route(request, function (response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- }
- });
- }
- }
- })(marker, i));
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement