We Keep Coding

How to save the Google map location with mvc

I Want to save my address to database and show them on Google map but I dont want to use latitude and longitude method. Since there is couple of example I seen but most of them asking latitude and longitude to user who will save the data. But assume that the user doesn't know about anything what the latitude and longitudes inputs are and they just want to write down to adres or choose in from Google map? What is the solution for that scenario?

You might wanna take a look at this
Google Geo Coding
Below is a small example , hope you have studied google map API already
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 41.85, lng: -87.65 }// initial coords as default
});
directionsDisplay.setMap(map);
directionsService.route({
origin: Address here ,
destination: Address here,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
directionsDisplay.setDirections(response);

Google Maps API Intel XDK Waypoints

For a school project I have to make an app, using Intel XDK, jQuery Mobile and an API. I wanted to make an app in which you can make a route and display this route on a google-maps-map (like a travelapp to view your trips).
I used Intel XDK (HTML5 + Cordova and the App Designer) and got an API key from the Google Maps Javascript API.
Right now, I have used the Google Maps API and displaying a route from A to B went well. In the following code (this is in my script) I tried to add waypoints to my route. In my HTML code I have three text-inputs for the user (start, via (=waypoint), end), the map and a button to show the route. I have looked at many sample codes, but my code doesn't work and I don't know why. There is no error, but if you push the showbutton, nothing happens. What have I done wrong or what did I miss?
I hope anyone can help and thanks in advance!
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initMap() {
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
// set direction render options
//var rendererOptions = { draggable: true };
directionsDisplay = new google.maps.DirectionsRenderer({map: map});
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// add the map to the map placeholder
var map = new google.maps.Map(document.getElementById("gmap"),myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = $('#start-input').val();
var via = $('#via-input').val();
var end = $('#end-input').val();
var waypts = [];
waypts.push({
location: via,
stopover: true
});
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
unitSystem: google.maps.UnitSystem.IMPERIAL,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert('Directions request failed due to ' + status);
}
});
}
function createMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
/* button #show-btn */
$(document).on("click", "#show-btn", function(evt) {
initMap();
createMarker(start);
createMarker(via);
createMarker(end);
return false;
});

You're creating the variables start, via and end as local variables in your calcRoute function, meaning they're not available to any code outside of that function. So when you try and refer to them in these lines, they'll be undefined, and I suspect you're getting a JS error:
createMarker(start);
createMarker(via);
createMarker(end);
Make them global variables instead; define them at the same time as you do this:
var directionDisplay;
i.e. that becomes:
var directionDisplay, start, via, end;
And then remove the var keyword from where you refer to them in the calcRoute function, i.e. do:
function calcRoute() {
start = $('#start-input').val();
via = $('#via-input').val();
end = $('#end-input').val();
You also have the same problem with your map variable. You create that as a local variable in your initMap function, and then try and refer to it in the createMarker function, which won't have access to it. Make that a global variable too.

Google Maps Api - Passing google.maps.Place to Direction Service

According to the Google documnetation, one can pass the Google Place ID of a location to the Direciton Service. However, regardless of what combination I try, I absolutely cannot get it to work; I am receiving a NOT_FOUND error. I have tried hard coding the id as a test to no avail.
The basic initialization code:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var hotelMap;
var placesService;
function initialize() {
var mapOptions = {
center: { lat: 37.30138, lng: -89.57778},
zoom: 15,
};
hotelMap = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);
var marker = new google.maps.Marker({
position:{ lat: 37.30138, lng: -89.57778},
map: hotelMap,
});
var info = new google.maps.InfoWindow({
content: "3265 William Street, Cape Girardeau, MO 63701"
});
marker.setMap(hotelMap);
info.open(hotelMap, marker);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(hotelMap);
directionsDisplay.setPanel(document.getElementById("directionModalBody"));
document.getElementById("searchButton").addEventListener("click", function() {
var keyword = document.getElementById("searchBox").value;
var requestOptions = {
location: { lat: 37.3011339, lng: -89.5770238},
radius: '5000',
keyword: keyword
};
placesService = new google.maps.places.PlacesService(hotelMap);
placesService.nearbySearch(requestOptions, findCallback);
});
}; // end initiallize
The window.onload function:
window.onload = function() {
initialize();
document.getElementById("calcDirections").onclick = function() {
if ($("#city").val() != null && $("#city").val() != "") {
findRoute();
} else {
alert("Please Enter a City");
}
}; // end onclick
$(".areaList").on("click", "a", function(e) {
e.preventDefault();
var placeID = $(this).attr("href");
locationRoute(placeID);
}) // end onclick
};
The problem function:
function locationRoute(locationID) {
var start = "ChIJfbJ8AyaId4gR4XCrciru2Qc";
var end = new google.maps.Place(locationID);
alert(locationID);
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}; // end request object
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
document.getElementById("getDirectionButton").click();
} else {
alert(status);
}// end if
}); // end route
} // end findRoute
I have tried just passing the place IDs as a string with no success. I have tried prefixing them, again no success. It seems from the Google documentation, one needs to create a google.maps.Place object, but how? I consulted the documentation (https://developers.google.com/android/reference/com/google/android/gms/location/places/Place#getId()), but did not see a constructor. How can I resolve this issue? Thanks so much.

Try this
directionsService.route({
origin: {placeId: start},
destination: {placeId: locationID}
...

There are two different options available
if you want to use place id
directionsService.route({
origin: {placeId: start},
destination: {placeId: locationID})
if you want to use lat and long
directionsService.route({
origin: {location: {lat:33.699234,lng:-102.870486}},
destination: {location: {lat:33.123366,lng:-102.862864}},
travelMode: "DRIVING"
and also make sure you configure direction service in google console
here is the link for that
https://developers.google.com/maps/documentation/javascript/directions

Google Maps API, Setting a name of marker when getting directions

I have a program that allows the user to select multiple items for a trip. Part of the program maps the items in google maps. I am using the lat/long coordinates to generate the waypoints and then the API takes it from there. The final map shows the route and markers. I would like to give each marker a custom name instead of the default street address currently being displayed. Is this possible?
//Display the route on the map
$.post("processors/getMapWayPoints.php",{
tripID: tripID
}, function(e){
console.log("Return is " + e);
latlong = JSON.parse(e);
//iterate through each locations lat/long and add it to the mappoints array for the route plotting
for(var i = 0; i < latlong.length; i+=3){
var name = latlong[i];
var lat = latlong[i+1];
var lng = latlong[i+2];
//create google lat/long point object
var pt = new google.maps.LatLng(lat, lng);
//add the location to the array for the route
mappoints.push({location:pt, stopover:true});
//not being used yet
pointNames.push(name);
}
var mapOptions = {
zoom:11,
center: home
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
var request = {
origin:home,
destination:home,
waypoints: mappoints,
//optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
});

Google Maps Api check if place is on the route

I made with Google Maps an route between two places. Thats works fine.
But i also have an database with interesting points on different roads in
my country. I like to show them if they are on the generated route. Places who are
not one this route, don't need to be shown.
My database with intereseting points contains latitude and longitude coordinates.
How can i check is they are on my route? There are approximately 30 or 40 interesting
point in my database.
// set request
var request = {
origin: initialLocation,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
// make route
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// set route
directionsDisplay.setDirections(response);
}
});
UPDATE:
Build new function "isLocationOnEdge". But the check runs the markers when they are not on the road:
// get flitsers on the route
function getFlitsersOnRoute(){
// set request
var request = {
origin: current_location,
destination: $('#gegevens').html(),
travelMode: google.maps.TravelMode.DRIVING
};
// make route
directionsService.route(request, function(response, status) {
// isLocationOnEdge
var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
var coords = response.routes[0].overview_path;
var image = base_url+'external/afbeeldingen/google_markers/flitser.png';
// get flitsers
$.ajax({
type: "POST",
async:false,
url: base_url+"advies/get/9",
success: function (data) {
var result = jQuery.parseJSON(data);
// loop trough flitsers
$.each(result.flitsers.m, function(i, item) {
// latitude longitude
var latlng = item["#attributes"].gps.split(",");
// make google latlng
var myLatlng = new google.maps.LatLng(latlng[0],latlng[1]);
if (myLatlng,coords)
{
// set and define the marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
size: new google.maps.Size(15, 15),
icon: image,
title: 'Flitser'
});
}
});
}
});
});
}

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)
To determine whether a point falls on or near a polyline, or on or near the edge of a polygon, pass the point, the polyline/polygon, and optionally a tolerance value in degrees to google.maps.geometry.poly.isLocationOnEdge(). The function returns true if the distance between the point and the closest point on the line or edge falls within the specified tolerance. The default tolerance value is 10-9 degrees.
https://developers.google.com/maps/documentation/javascript/geometry

Include the geometry library in your Google Maps API request:
http://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=TRUE_OR_FALSE
Pseudo-code:
// Make isLocationOnEdge easier to access
var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
for (var i = 0; i < interestingPlaces.length; i++) {
if (isLocationOnEdge(interestingPlaces[i],
response.routes[0].overview_path))
{
// Do something with interestingPlaces[i]
}
}
Google maps documentation for isLocationOnEdge()