I am new to API's and I have this to create my map but I want to take the driving directions out what should I change to get this to happen. I have a ton of markers being rendered from MySQL so I don't need to start over, just remove the directions.
Here is the web page.
This is the code for rendering the map:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
var request = {
origin: '<?php echo $orgcitname; ?>',
destination: '<?php echo $descitname; ?>',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
To remove the directions from the map, you call the google.maps.DirectionsRenderer's setMap() function without any parameters. So in your case:
directionsDisplay.setMap();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
That will leave you with just your map.. no directions..
Related
I am using Google API v3 for "directions to here". However, the maps are not getting loaded properly. I am getting no error in logs.
When the page loads, I do the following:
var startPoint = new google.maps.LatLng(start.lat(), start.lng());
var endPoint = new google.maps.LatLng(parseFloat(end.latitude), parseFloat(end.longitude));
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
center: endPoint
};
var map = new google.maps.Map(document.getElementById("branchLocatorSiteMapCanvas"), mapOptions);
$r.currentPage.map = map;
$page.off('pageshow').on('pageshow', function () {
// Suitable for V3 and fix for map div is not rendered
if ($r.currentPage.map) {
var timer = window.setTimeout(function () {
google.maps.event.trigger($r.currentPage.map, 'resize');
if (endPoint) {
$r.currentPage.map.setCenter(endPoint);
}
else if (startPoint) {
$r.currentPage.map.setCenter(startPoint);
}
window.clearTimeout(timer);
}, 400);
}
});
if ($r.currentPage.map) {
google.maps.event.addListenerOnce($r.currentPage.map, 'idle', function () {
// Do something only the first time the map is loaded
google.maps.event.trigger($r.currentPage.map, 'resize');
$r.currentPage.map.setCenter(endPoint);
});
I use this snippet for Direction Service and Rendering.
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
I didn't try it with your code example, but you can take this simpler demo project to see how to make it work in a Worklight 6.0.0.2-based app: Google Maps Directions Demo project.
The demo project is based on this example via the Google Maps documentation.
End result is:
JavaScript portion of the app:
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var map;
function wlCommonInit(){
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
disableDefaultUI: false,
center: chicago
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
I have a google map on a website where I show the position of a business with a custom marker, also, I show the routes to get to the place but I can't seem to understand how to use a custom icon for the START position...
Here is the code I use:
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({draggable: true,suppressMarkers: true});
var latlng = new google.maps.LatLng(45.86140239,-74.062538);
var myOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng,
mapTypeControl: false,
panControl: false,
streetViewControl: false,
zoomControl: false,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Marqueur sur le bureau
var icon = {url: 'marker001c.png'};
var headquartersMarker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
icon: icon,
zIndex:99999
});
directionsDisplay.setMap(map);
}
// Calcule de la route
function calcRoute() {
var start = document.getElementById("start").value;
var end = new google.maps.LatLng(45.86140239,-74.062538);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
directionsDisplay.setPanel(document.getElementById('panel'));
});
var starticon = new google.maps.MarkerImage('test.png');
var marker = new google.maps.Marker({
position:start,
map: map,
icon: starticon,
});
makeMarker({
position: new google.maps.LatLng(60.17295,24.93981),
content: "Some text in the info bubble.",
title: "Tooltip text"
});
}
</script>
By using this code it show me the end icon (my main marker) but I can't change the start icon. Any idea?
start position as string could be used for DirectionsService but for marker you have to change position to LatLng.
See Geocoding Service
For geocoding add new global variable:
...
var map;
var geocoder;
And initialize it:
function initialize() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer({draggable: true, suppressMarkers: true});
...
And get the latlng of the start 'address' after directionsService.route():
geocoder.geocode( { 'address': start}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var starticon = new google.maps.MarkerImage('images/start.png');
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
icon: starticon
});
} else {
alert("Geocode failed with status: " + status);
}
});
See example at jsBin. Note: it won't work there because I use my icon images so put in paths to your icon images.
I am working on Google Map v3.
I need to display Map in infowindow on click of route marker.
Currently, my code displays adrress of the corresponding marker.
In the attached image, on click of Marker "B", small Map is opened with marker "B" centered.
Please let me know if anyone have any inputs.
Thanks,
Sharath
Below is my code snippet....
waypoints array contains the 2 points 2 display (origin and destination)
// Code starts from here...
var origin = waypoints[0];
var destination = waypoints[1];
var mapOptions = {
center: new google.maps.LatLng(-25, 133),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
var directions = new google.maps.DirectionsService();
directions.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setPanel(document.getElementById ("drivingDirections"));
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
}
});
I am using this function: getDirection(glat,glon,acity) Using this function I have to draw a route from a city to the glat and glong [latitude and longitude] position. I was finished with everything but I dont know how to set variable acity as origin.
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var default_latitude=22.5936840;//12.9715987;
var default_longitude=78.962880;//77.5945627;
var myOptions =
{
center: new google.maps.LatLng(default_latitude,default_longitude),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapp"),myOptions);
var latlng=new google.maps.LatLng(glat,glon);
$('#mapDiv1').modal({closeClass: "mapCloseImg1"});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("panel"));
var request = {
origin: [WANT TO PUT ACITY AS ORIGIN BUT DONT KNOW HOW]
destination:latlng,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
I reading stuff about the Google API and I wanted to implement the usual Google driving directions that Google maps has for 2 different points. Here's my code so far
(function() {
window.onload = function() {
// Creating a map
var options = {
zoom: 5,
center: new google.maps.LatLng(36.1834, -117.4960),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array that will contain the points for the polyline
var route = [
new google.maps.LatLng(37.7671, -122.4206),
new google.maps.LatLng(34.0485, -118.2568)
];
// Creating the polyline object
var polyline = new google.maps.Polyline({
path: route,
strokeColor: "#ff0000",
strokeOpacity: 0.6,
strokeWeight: 5
});
// Adding the polyline to the map
polyline.setMap(map);
};
})();
It has a straight line between the two cities...
Here's an example of using the DirectionsService:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var homeLatlng;
function initialize() {
homeLatlng = new google.maps.LatLng(37.7671, -122.4206);
var myOptions = {
zoom: 10,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: false,
map: map,
markerOptions: {
draggable: false
},
panel: document.getElementById("directionsPanel"),
infoWindow: infowindow
});
var request = {
origin:homeLatlng,
destination:new google.maps.LatLng(34.0485, -118.2568),
travelMode: google.maps.DirectionsTravelMode[DRIVING],
unitSystem: google.maps.UnitSystem[METRIC]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
If you want to draw a route based on driving directions (or walking directions or transit directions or biking directions), use the Google Directions API. I don't believe the API won't draw the route for you, but it will give you all the lat/lng points that you need to connect in your polyline to show the route.