How to give numbers to markers in google maps - google-maps

``In my requirement,I have a set of way points passed as json object to map. From those waypoints , the start and end have to shown in alphabets and the in-between markers should be in numbers. How can I implement this scenario?
Also I found that google maps support a max of 8 wayspoints and one start and end .Is there any way to add more waypoints to my map? I am using google maps DirectionsService for waypoint renderng.
The code I used is
function calcRoute() {
var start = wayPointArray[0];
var end = wayPointArray[1];
var waypts = [];
for (var i = 2; i <= wayPointArray.length-1; i++) {
waypts.push({
location: wayPointArray[i],
stopover: true
});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}
wayPontArray contains all lats and long for the waypoints. The first and second will be the start and end respectively and all others are the waypoints. The start and end should be in alphabets ie A and B. The in between waypoints should be in numbers.
Thanks in advance
Boney.

If you know the coordinates of your waypoints, you can use custom markers with numbers or lettersas labels as in this example:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'
});

Related

Google Maps API route response different than the original coordinates

I'm working with Google Maps to show a cars last location. Often times this will be in a parking lot off of a main road, however when I input the coordinates for the parking lot carLatLng into Google's routing engine the response I get looks to be the nearest road. How do I get it so that the same coordinates I enter are the ones I get from my response?
var carLatLng = new google.maps.LatLng(29.9461,-90.07)
var request = {
origin: carLatLng,
destination:
waypoints: [],
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.WALKING
};
self.directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var lat = response.routes[0].legs[0].end_location.lat();
var lng = response.routes[0].legs[0].end_location.lng();
// lat = 29.946164
// lng = -90.0702933
}
});
The DirectionsService always returns start/end points for driving directions on the road. If you want the result to end somewhere else, you need to extend the polyline yourself (you have the original coordinates, draw a polyline from there to the end of the route from the directions service).
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var carLatLng = new google.maps.LatLng(29.9461, -90.07);
var carMarker = new google.maps.Marker({
map: map,
position: carLatLng
});
var request = {
origin: "Dixon, New Orleans, LA",
destination: carLatLng,
waypoints: [],
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.WALKING
};
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({
map: map,
preserveViewport: true,
polylineOptions: {
strokeColor: "#0000FF"
}
})
directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var lat = response.routes[0].legs[0].end_location.lat();
var lng = response.routes[0].legs[0].end_location.lng();
directionsRenderer.setDirections(response);
map.setCenter(carLatLng);
map.setZoom(20);
var polyline = new google.maps.Polyline({
map: map,
strokeColor: "#0000FF",
path: [carLatLng, response.routes[0].legs[0].end_location]
});
// lat = 29.946164
// lng = -90.0702933
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I've done a lot lately with Google Map API, unfortunately not with the routing service.
But have a look at these tutorials, they are quite detailed, I found them very helpful at times: http://econym.org.uk/gmap/
For your case I'd especially look at part 26 onwards.

Hide polyline from A to B using in Google Map api v3

I am displaying google map with code below, I want to hide Polyline between A to B. All answers on google talk about creating an array and then doing array.setmap(null). can I hide polyline without using arrays. In other case, how should I use array to hide polyline using code below.
Edit: I need marker A and B to be shown
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;
function initialize() {
var rendererOptions = {
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Create a map and center it on islamabad.
var islamabad = new google.maps.LatLng(33.7167, 73.0667);
var mapOptions = {
zoom: 13,
center: islamabad
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById('MainContent_txtFrom').value;
var end = document.getElementById('MainContent_txtTo').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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
If you want to render the directions but hide the polyline, use the DirectionsRendererOptions suppressPolylines.
function initialize() {
var rendererOptions = {
suppressPolylines: true,
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
As shown in the demo below, you can remove polylines by two means:
setting the option suppressPolylines to true in directionsDisplay, your google.maps.DirectionsRenderer by using
directionsDisplay.setOptions({
suppressPolylines: true
});
This will preserve the start- and end-point markers.
The method setOptions(options:DirectionsRendererOptions) changes the options settings of DirectionsRenderer after initialization.
use directionsDisplay.setMap(null); to remove all directions rendering, but this includes markers, so if you do that you will need to add extra markers to the map.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;
var pointA = new google.maps.LatLng(48.86, 2.35);
var pointB = new google.maps.LatLng(33.7167, 73.0667);
function initialize() {
var rendererOptions = {
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Create a map and center it on islamabad.
var islamabad = new google.maps.LatLng(33.7167, 73.0667);
var mapOptions = {
zoom: 13,
center: islamabad
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = pointA;
var end = pointB;
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);
}
});
};
function removeRoute() {
directionsDisplay.setOptions({
suppressPolylines: true
});
// this "refreshes" the renderer
directionsDisplay.setMap(map);
};
function removeRouteNull() {
directionsDisplay.setMap(null);
};
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 280px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<button onclick="removeRoute()">Remove route (suppressPolylines)</button>
<button onclick="removeRouteNull()">Remove route (setMap(null))</button>
<button onclick="initialize()">Undo all</button>
<section id="map"></section>
If you refer to this answer: Google Maps v3 directionsRenderer.setMap(null) not working to clear previous directions you should see what you're looking for.
You do not need to use an array as you're implementing the directionsRenderer object. If you declare this globally (Edit Which I now see you have already) (so that you only have one instance at any given time) then you can simply use directionsDisplay.setMap(null) to remove previous directions rendered.
If you want to render the markers from the response but hide the polyline I suppose the simplest (but I would imagine by no means cleanest) way would be to simply alter the opacity on the polyline object:
var myPolylineOptions = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 0.00001,
strokeWeight: 0
});
And then assign it to your renderer:
directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: myPolylineOptions});

Info WIndow with Map for the Clicked Marker

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);
}
});

Why won't google map navigate on my web page?

I want to locate a user's location using Geolocation and then navigate between user;s position and a fix point, but Google map just won't navigate and I am using the codes from Google's official documentation!
What's wrong? I am going mad after tried thousands of times,plz help
<script type="text/javascript">
$( "#map-page" ).live( "pageinit", function() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var salon = new google.maps.LatLng(22.981666,120.194301);
var defaultLatLng = new google.maps.LatLng(22.983587,120.22599); // Default to Hollywood, CA when no geolocation support
if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
calcRoute(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
console.log(error);
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
var marker = new google.maps.Marker({
position:new google.maps.LatLng(22.981666,120.194301),
map:map,
title:"the salon"
});
}
function calcRoute(latlng) {
var start = latlng;
var end = new google.maps.LatLng(22.981666,120.194301);
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);
}
});
}
});
</script>
You forgot to setup directionsDisplay.

Google Maps Waypoints not showing up

I am new to the Google Maps API and so far I have run into many issues.
I am trying to map waypoints from latlng coords determined by an array of checkboxes.
Here is my js file in full:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var waypts = [];
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute()
{
var checkboxArray = document.getElementsByName("waypoints[]");
for (var i = 0; i < checkboxArray.length; i++)
{
if (checkboxArray[i].checked)
{
var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
var lng = parseFloat(checkboxArray[i].attributes["lng"].value);
waypts.push({
location: new google.maps.LatLng(lat, lng),
stopover: true
});
}
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
console.log("mapping...");
if(status == google.maps.DirectionsStatus.NOT_FOUND)
{
console.log("Could not one or more of locations");
}
});
The map shows up and "mappings..." pops in the console when the page loads. When I press the calcRoute submit button nothing happens. I have logged the lat/long and the waypt object so I know they are getting to that point but it seems the route is never recalculated, etc.
I really just need a basic demo on this but the only one I have found is which I have used for almost everything but I get no results:
Google Example Directions Waypoints
Currently your script never will show any route, because you are missing the call of directionsDisplay.setDirections() to print the route.
You also should should put the call of directionsService.route() into the calcRoute-function.
fixed code:
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute()
{
var checkboxArray = document.getElementsByName("waypoints[]");
var waypoints=[];
for (var i = 0; i < checkboxArray.length; i++)
{
if (checkboxArray[i].checked)
{
var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
var lng = parseFloat(checkboxArray[i].attributes["lng"].value);
waypts.push({
location: new google.maps.LatLng(lat, lng),
stopover: true
});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if(status == google.maps.DirectionsStatus.OK)
{
//print the route
directionsDisplay.setDirections(response);
}
else
{
console.log('something went wrong',status);
}
});
}
</script>
There isn't a great deal of information about how your Javascript relates to the page HTML. But this line
var checkboxArray = document.getElementsByName("waypoints[]");
should probably be
var checkboxArray = document.getElementsByName("waypoints");
assuming that all your checkboxes have the name waypoints.
What is inside the quotes should exactly match the name of the checkbox elements, so if each checkbox has the name waypoint (because each checkbox marks a single waypoint, this is a possibility) then you should use .getElementsByName("waypoint") to find all elements which have that name.