I have included the city specific latitude, longitude in a city.js file and i am getting the content of the city from that file.
Now, i want to pass that information into my javaScript code to change the map with the change in city name.
I have tried something like this but didn't get success-----
$(document).ready(function()
{
$.get('City.js', function(data){
var jsonObject = JSON.parse(data);
var lat = jsonObject[1].latitude;
var lng = jsonObject[1].longitude;
var latlng = new google.maps.LatLng(lat, lng);
$("#City").change(function () {
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true
});
});
});
here city.js is a java script file.The content of the java script file is---
var jsonObject = [{ "CityId": "1", "CityName": "Faridabaad", "latitude": "28.4211", "longitude": "77.3078" },
{ "CityId": "2", "CityName": "Greater Noida", "latitude": "28.4962", "longitude": "77.5360" }];
My dropdown list which changes locality name as the city name changes is working fine.Now, i only want is to change google map as the city name changes in the dropdown list----My working code is like this----
$("#City").change(function () {
$("#Locality").empty();
$.ajax({
type: 'POST',
url: '#Url.Action("LoadLocalities","Project")',
dataType: 'json',
data: { id: $("#City").val() },
success: function (localities) {
$.each(localities, function (i, locality) {
$("#Locality").append('<option value="' + locality.Value + '">' +
locality.Text + '</option>');
});
},
error: function (ex) {
alert('Failed to retreive Locality.' + ex);
}
});
return false;
})
});
My javaScript code for loading google map is as----
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(28.713956, 77.006653);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
animation:google.maps.Animation.BOUNCE,
position: myLatlng,
map: map,
title: "Project location"
});
google.maps.event.addListener(marker, 'dragend', function (event) {
//document.getElementById("lat").value = event.latLng.lat();
//document.getElementById("long").value = event.latLng.lng();
document.getElementById("Geolongitude").value = event.latLng.lng();
document.getElementById("Geolatitude").value = event.latLng.lat();
});
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, "load", initialize);
My form are having two dropdown list like this---
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>Enter the Project Details</legend>
<div class="editor-label">
#Html.LabelFor(model => model.City)
</div>
<div class="editor-field">
#if (ViewData.ContainsKey("City")){
#Html.DropDownListFor(model => model.City, ViewData["City"] as List<SelectListItem>, new { style = "width:250px", #class = "DropDown1"}) #Html.ValidationMessageFor(model => model.City)
}
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Locality)
</div>
<div class="editor-field">
#Html.DropDownList("Locality", new SelectList(string.Empty,"Value","Text"),"Please Select a locality", new { style = "width:250px", #class = "DropDown1" })
If you want set the map center do it;
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-27.793949,-52.348643),
mapTypeId: google.maps.MapTypeId.ROADMAP };
// Save map as global variable.
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
On your change City function;
// Catch center;
center = map.getCenter();
// .. insert your code here to change center object lat/long
// center.lat = -50.00 ( I do not remember the atribute name )
map.setCenter(center);
Related
Nested AJAX call are used to get foursquare image URL.
First AJAX call is to derive venue ID from foursquare API and used in 2nd AJAX call to get image URL. Said image URL is used to render venue image in Google Map's Infowindow after each marker is clicked.
var map;
//Locations that automatically show on map
var locations =[
{
title: 'Empire State Building',
location: {
lat: 40.748541,
lng: -73.985758
} },
{
title: 'Radio City Music Hall',
location: {
lat: 40.759976,
lng: -73.979977
} },
{
title: 'Hotel Pennsylvania',
location: {
lat: 40.749772,
lng: -73.990624
}},
{
title: 'The Roosevelt Hotel',
location: {
lat: 40.754763,
lng: -73.977436
} },
{
title: 'Gershwin Theatre',
location: {
lat: 40.76234,
lng: -73.985235
}}];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 40.7413549,
lng: -73.99802439999996
},
zoom: 12
});
var infowindow = new google.maps.InfoWindow();
locations.forEach(function(location,i) {
this.position = locations[i].location;
var title = locations[i].title;
var marker = new google.maps.Marker({
position: position,
title: title,
map: map,
animation: google.maps.Animation.DROP,
id: i,
});
locations[i].marker = marker;
console.log('wunderbar', location);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var client_id = 'V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN';
var client_secret = 'AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB';
var fourSquareUrl = 'https://api.foursquare.com/v2/venues/search?ll=' + self.position.lat + ',' + self.position.lng + '&query=' + marker.title+'&client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20170824';
$.getJSON(fourSquareUrl).done(function(data) {
console.log(data);
var response = data.response.venues["0"];
var venue_id = response.id;
this.address=response.location.formattedAddress;
var baseUrl = 'https://api.foursquare.com/v2/venues/';
var fsParam = '/?client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20131016';
var picUrl = baseUrl + venue_id + fsParam;
$.getJSON(picUrl).done(function(pic){
var venue_data = pic.response.venue;
self.img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix;
console.log(pic);
});
infowindow.setContent('<div><strong>' + locations[i].title +'<div>'+'<div>'+'<img src='+self.img_url+'>'+'</div>'+this.address+'</div>'+'</strong></div>');
//Alert User that there was a data request fail from third part API
}).fail(function() {
alert("Error");
});
infowindow.open(map, marker);
// sets animation to bounce 2 times when marker is clicked
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
marker.setAnimation(null);
}, 2130);
};
})(marker, i));
});
ko.applyBindings(new ViewModel());
}
var Loc = function(data) {
this.title = data.title;
this.location = data.location;
this.marker = data.marker;
console.log('wonderful', data);
};
var ViewModel = function() {
var self = this;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title> Local Map</title>
</head>
<body>
<div class="container">
<div class="forminline">
<ul>
<li></li>
</ul>
</div>
<div id="map">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'></script>
<script type="text/javascript" src='app.js'></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE5O2RkGKfoHcOJt3JFg4ayHVizN7Dmgk&callback=initMap">
</script>
</body>
</html>
Accurately render each venue image in infowindow when each marker is clicked once.
When map is loaded, the first click on one marker did not render venue image in infowindow until it is clicked the second time. Chrome's developer tool console showed "net::ERR_FILE_NOT_FOUND".
When a second marker is clicked, image from first marker is rendered in infowindow until it is clicked the second time.
I appreciate any input on this as I am new to Javascript. Thanks in advance!
Infowindow setcontent was fired before nested AJAX call was completed. Therefore jQuery deferreds was used (with when & then statement) to ensure nested JSON is complete before setting content in infowindow.
Code as follow;
var map;
var locations =[
{
title: 'Empire State Building',
location: {
lat: 40.748541,
lng: -73.985758
} },
{
title: 'Radio City Music Hall',
location: {
lat: 40.759976,
lng: -73.979977
} },
{
title: 'Hotel Pennsylvania',
location: {
lat: 40.749772,
lng: -73.990624
}},
{
title: 'The Roosevelt Hotel',
location: {
lat: 40.754763,
lng: -73.977436
} },
{
title: 'Gershwin Theatre',
location: {
lat: 40.76234,
lng: -73.985235
}}];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 40.7413549,
lng: -73.99802439999996
},
zoom: 12
});
var infowindow = new google.maps.InfoWindow();
locations.forEach(function(location,i) {
this.position = locations[i].location;
var title = locations[i].title;
var marker = new google.maps.Marker({
position: position,
title: title,
map: map,
animation: google.maps.Animation.DROP,
id: i,
});
locations[i].marker = marker;
console.log('wunderbar', location);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var client_id = 'V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN';
var client_secret = 'AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB';
var fourSquareUrl = 'https://api.foursquare.com/v2/venues/search?ll=' + self.position.lat + ',' + self.position.lng + '&query=' + marker.title+'&client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20170824';
$.when($.getJSON(fourSquareUrl).done(function(data) {
console.log(data);
var response = data.response.venues["0"];
var venue_id = response.id;
this.address=response.location.formattedAddress;
var baseUrl = 'https://api.foursquare.com/v2/venues/';
var fsParam = '/?client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20131016';
var picUrl = baseUrl + venue_id + fsParam;
$.getJSON(picUrl).done(function(pic){
var venue_data = pic.response.venue;
self.img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix;
console.log(pic);
}).then(function() {
infowindow.setContent('<div><strong>' + locations[i].title +'<div>'+'<div>'+'<img src='+self.img_url+'>'+'</div>'+this.address+'</div>'+'</strong></div>');
});
}).fail(function() {
alert("Error");
});
infowindow.open(map, marker);
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
marker.setAnimation(null);
}, 2130);
};
})(marker, i));
});
ko.applyBindings(new ViewModel());
}
var Loc = function(data) {
this.title = data.title;
this.location = data.location;
this.marker = data.marker;
console.log('wonderful', data);
};
var ViewModel = function() {
var self = this;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title> Local Map</title>
</head>
<body>
<div class="container">
<div class="forminline">
<ul>
<li></li>
</ul>
</div>
<div id="map">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'></script>
<script type="text/javascript" src='app.js'></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE5O2RkGKfoHcOJt3JFg4ayHVizN7Dmgk&callback=initMap">
</script>
</body>
</html>
I am using angular-maps to create a map, with a list of markers.
I have a problem displaying the markers. I have no errors though.
Here is my code:
Controller
var app = angular.module('mapController', []);
app.service('Map', function($q) {
this.init = function() {
var options = {
center: new google.maps.LatLng(45.7154289, 4.9317724),
zoom: 14,
disableDefaultUI: true
}
this.map = new google.maps.Map(
document.getElementById("map"), options
);
this.places = new google.maps.places.PlacesService(this.map);
var markers = [{
"title": 'Capgemini',
"lat": '45.7154289',
"lng": '4.9317724',
"description": 'Capgemini'
}];
var defaultMarkerColor = 'ff0000';
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultMarkerColor);
// marker object for the marker
var marker = new google.maps.Marker({
position: google.maps.LatLng(markers[0].lat,markers[0].lng),
map: this.map,
title: markers[0].title,
animation: google.maps.Animation.DROP,
icon: pinImage
});
}
this.search = function(str) {
var d = $q.defer();
this.places.textSearch({query: str}, function(results, status) {
if (status == 'OK') {
d.resolve(results[0]);
}
else d.reject(status);
});
return d.promise;
}
this.addMarker = function(res) {
if(this.marker) this.marker.setMap(null);
this.marker = new google.maps.Marker({
map: this.map,
position: res.geometry.location,
animation: google.maps.Animation.DROP
});
this.map.setCenter(res.geometry.location);
}
});
app.controller('mapController', function($scope, Map) {
$scope.place = {};
$scope.search = function() {
$scope.apiError = false;
Map.search($scope.searchPlace)
.then(
function(res) { // success
Map.addMarker(res);
$scope.place.name = res.name;
$scope.place.lat = res.geometry.location.lat();
$scope.place.lng = res.geometry.location.lng();
},
function(status) { // error
$scope.apiError = true;
$scope.apiStatus = status;
}
);
}
$scope.send = function() {
alert($scope.place.name + ' : ' + $scope.place.lat + ', ' + $scope.place.lng);
}
Map.init();
});
and the HTML :
<ion-content ng-controller="mapController" style="margin-top: 25px">
<div class="container">
<div id="map" libraries="places" data-tap-disabled="true"></div>
<form name="searchForm" novalidate
ng-submit="search()">
<div class="input-group">
<input name="place" type="text" class="form-control"
ng-model="searchPlace" required autofocus />
<br>
<span class="input-group-btn">
<button class="btn btn-primary"
ng-disabled="searchForm.$invalid">Search</button>
</span>
</div>
</form>
</div>
The map shows up correctly, and centered on the coordinates I chose, but without a marker.
I would appreciate any help.
Hi took me sometime to put in place the fiddle... :)
I made this changes to make it work:
The markers:
var markers = [{
"title": 'Capgemini',
"lat": 45.7154289,
"lng": 4.9317724,
"description": 'Capgemini'
}];
And then the marker definition
var marker = new google.maps.Marker({
position:{lat: markers[0].lat, lng: markers[0].lng},
map: this.map,
title: markers[0].title,
animation: google.maps.Animation.DROP,
icon: pinImage
});
the easiest way is to use numbers for the coords.
here you can find the fiddle
it isn't super clean and it is lot of debug stuff and most important if you can initialize and see the map you don't really need it.
hope this help
I have been trying to use google map with angularJS.
I have learned how to use it through https://angular-ui.github.io/angular-google-maps/#!/.
Everything goes well.
For each marker, I can show InfoWindow which has an element information of myList.
But I have got stuck in InfoWindow with cluster.
When cluster is clicked, I want to show the information list of markers in cluster.
Even I can't show simple InforWindow when clicking the cluster.
Below sources are my code.
Please tell me if it is not enough to solve my problem.
Please tell me what is wrong and how to solve this.
Have a nice day.
* javascript
$scope.map.map = {
center: { latitude: $scope.map.myList[0].lat, longitude: $scope.map.myList[0].lng },
zoom: 17,
events : {
tilesloaded: function (map) {
$scope.$apply(function () {
google.maps.event.addDomListener(window, 'resize', function() {
var lat = $scope.map.myList[$scope.map.markerPosition-1].lat;
var lng = $scope.map.myList[$scope.map.markerPosition-1].lng;
var center = new google.maps.LatLng(lat, lng);
map.setCenter(center);
});
});
}
},
markersEvents: {
click: function(marker, eventName, model) {
model.show = !model.show;
return;
}
},
clusterOptions : { // options of cluster
gridSize: 40,
ignoreHidden: true,
zoomOnClick : false,
averageCenter : true,
styles: [
{
height: 53,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
width: 53,
textColor : 'white'
}
]
},
clusterEvent: { // when cluster's clicked
click: function(map, markers) {
var contentString = 'ABCD';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, markers);
return;
}
}
};
$scope.map.options = {
streetViewControl : false
};
$scope.map.markers = [];
* html
<ui-gmap-google-map center='map.map.center' zoom="map.map.zoom" options="map.options" events="map.map.events">
<ui-gmap-markers models="map.markers" coords="'self'" icon="a" events="map.map.markersEvents" options="'options'"
doCluster="true" clusterOptions="map.map.clusterOptions" clusterEvents="map.map.clusterEvent">
<ui-gmap-windows show="show">
<div ng-non-bindable>{{id}}</div>
</ui-gmap-windows>
</ui-gmap-markers>
Answer myself.
var infoWindowOptions = {
content: "asdfasdf"
};
var infowindow = new google.maps.InfoWindow(infoWindowOptions);
infowindow.open(map.map_, *marker*);
I have a 5 tab's app one of which contains a map.The map loads only when browsed to directly in the url bar.Otherwise it seems the controller is not loaded as i determined by some console logs. as the app will be run on mobile devices the map page will never be loaded first so i need a fix for this. I thought the controllers would be called when a tab is clicked but that doesn't seem t be the case.
Controller
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
//console.log("Map controller");
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//console.log('placing map');
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
})
View
<ion-view view-title="Directions">
<ion-content>
<div id="map" class="card" data-tap-disabled="true">
</div>
</ion-content>
</ion-view>
Tabs
<ion-tab title="Directions" icon-off="ion-ios-location-outline" icon-on="ion-ios-location" href="#/tab/directions">
<ion-nav-view name="tab-directions"></ion-nav-view>
</ion-tab>
Router
.state('tab.directions', {
url: '/directions',
views: {
'tab-directions': {
templateUrl: 'templates/tab-directions.html',
controller: 'MapCtrl'
}
}
})
please ask questions it there is more info i can give you.
I had the same issue. I execute the function when the view is entered.
I added google.maps.event.trigger( map, 'resize' ); after $scope.map = map; because the map only loaded after refreshing the view.
This is my controller:
.controller('MapsController', function($scope, $ionicLoading){
$scope.$on( "$ionicView.enter", function( scopes, states ) {
var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function (pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
});
$scope.map = map;
google.maps.event.trigger( map, 'resize' );
});
});
I have this code that allows the user to enter two cities, and shows the location of the given inputs. But what I want is to show as well the direction from the 1st city to the other. How to do that?
Here is my practice code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBQ8OCC8En5vNHod25Ov3Qs5E1v7NPRSsg&sensor=true">
</script>
<script type="text/javascript">
var geocoder;
var map;
function initialize1() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 100.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function initialize() {
// add mapOptions here to the values in the input boxes.
var mapOptions = {
center: new google.maps.LatLng(-34.397, 100.644),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
geocoder = new google.maps.Geocoder();
addAddress(document.getElementById('from').value);
addAddress(document.getElementById('to').value);
}
function addAddress(place) {
var address = place;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
</head>
<body>
From: <input id="from" type="text" name="From"><br>
To: <input id="to" type="text" name="To"><br>
<button type="button" onclick="initialize()">View example (map-simple.html)</button>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
thanks
Jason
Use the DirectionsService in the Google Maps API v3. Here is an example from the documentation:
https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-simple
and with text directions:
https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel
if you mean the "location" means the address you can use the direction renderer like below to get the direction.
First of all store the location address of the two markers into the two text boxes if you want to display the to and from address with id's #from and #destination then follow the below code
$("#find").click(function () {
starting = $("#from").val();
finishing = $("#destination").val();
$("#map").gmap3(
{
action: 'getRoute',
options: {
origin: starting,
destination: finishing,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) {
alert("returning")
return
};
$(this).gmap3(
{
action: 'addDirectionsRenderer',
options: {
preserveViewport: true,
draggable: false,
directions: results
}
}
);
}
})
})
Explanation : At first I created two markers of different locations and different data then after the dragend of any marker there will be infowindow that shows the address and two buttons start and finish. I think you have done upto this part .
So after this I used two text boxes which will be filled according to the start button or finish button clicked .
After this if the user clicks the find button this text boxes values are used to find the direction between the two markers
Note: "here you can any marker for from or to only difference you have to maintain is to change the button clicked that is start or finish ....."
"You can even directly give the address in the text boxes and find the directions between them"
Here for whole manipulation I used gmap3 here is the code below that might help you
<script type="text/javascript">
window.onload = clear;
function clear() {
$("#from").val(null)
$("#destination").val(null)
}
$(document).ready(function () {
var starting = "";
var finishing = "";
$("#find").click(function () {
starting = $("#from").val();
finishing = $("#destination").val();
$("#map").gmap3(
{
action: 'getRoute',
options: {
origin: starting,
destination: finishing,
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) {
alert("returning")
return
};
$(this).gmap3(
{
action: 'addDirectionsRenderer',
options: {
preserveViewport: true,
draggable: false,
directions: results
}
}
);
}
})
})
$("#map").gmap3({
action: 'addMarkers',
markers: [ //markers array
{lat: 22.74, lng: 83.28, data: 'madhu' },
{ lat: 17.74, lng: 82.28, data: 'raghu' }
],
map: { // this is for map options not for any markers
center: [17.74, 83.28],
zoom: 5
},
marker: {
options: {
draggable: true
},
events: {// marker events
dragend: function (marker, event, data) {
var contentString = '<div id="main content">'
+ '<input type="button" id="start" value="start" />'
+ '<input type="button" id="finish" value="finish" />'
+ '</div>';
//get address on click event
$(this).gmap3({
action: 'getAddress',
latLng: marker.getPosition(),
callback: function (results) {
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' })
if (infowindow) {
content = results && results[1] ? results && results[1].formatted_address : 'no address';
infowindow.open(map, marker);
infowindow.setContent(content + contentString);
}
else {
content = results && results[1] ? results && results[1].formatted_address : 'no address';
$(this).gmap3({
action: 'addinfowindow',
anchor: marker,
options: { content: content + contentString },
events: {
domready: function () {
$("#start").click(function () {
alert("start clicked " + content);
$("#from").val(content);
starting = content;
check();
})
$("#finish").click(function () {
alert("finish clicked " + content);
$("#destination").val(content);
finishing = content;
})
}
}
});
}
}
});
},
}
},
});
});
</script>
here is the html part for the above
<div id="headinput">
<input type="text" value="enter from" id="from" />
<input type="text" value="enter destination" id="destination" />
<input type="button" value="find" id="find" />
</div>
<br />
<div id ="map"style="width: 100%; top: auto; left: auto; position: relative; height: 600px; float:left" ></div>
This is perfectly worked one I checked it in firefox browser........:D