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);
}
});
Related
i am new in sencha touch.
i have integrated google map using sencha touch and display marker on user current location.
now, i want to display direction from source address to destination address on map.
the sample like this,
https://maps.google.com/maps?saddr=21.220901,72.829056&daddr=20.915907,72.871628
i want display only map view with direction path.
how to display direction between two places on goole map using sencha toch ?
here is code,
function directionMap(src,dest){
// alert('calling');
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var request = {
// origin: '21.220901,72.829056',
// destination: '20.915907,72.871628',
origin: src,
destination: dest,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
just call directionMap function with source and destination it will draw path on map.
``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'
});
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..
Goal: Get the TEXT address and then display the street view and map view at the same time
Ref Site:
http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
My site:
http://www.iamvishal.com/dev/property/P2154 (pls click the map view to see the map)
Problem: I am able to display the map and the address correctly but instreet view does not change. Any idea why ?
My js variable address hold the text address in this case "323235 Balmoral Terrace Heaton Newcastle Upon Tyne"
function initialize()
{
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),
panoramaOptions);
map.setStreetView(panorama);
var geocoderTwo = new google.maps.Geocoder();
geocoderTwo.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);
}
}
);
}
Here's how I've created a streetview before:
function createStreetMap(strMapCanvasID, yourLatLng)
{
var panorama;
//once the document is loaded, see if google has a streetview image within 50 meters of the given location, and load that panorama
var sv = new google.maps.StreetViewService();
sv.getPanoramaByLocation(yourLatLng, 50, function(data, status) {
if (status == 'OK') {
//google has a streetview image for this location, so attach it to the streetview div
var panoramaOptions = {
pano: data.location.pano,
addressControl: false,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById(strMapCanvasID), panoramaOptions);
// lets try and hide the pegman control from the normal map, if we're displaying a seperate streetview map
objCreatedMap.setOptions({
streetViewControl: false
});
}
else{
//no google streetview image for this location, so hide the streetview div
$('#' + strMapCanvasID).parent().hide();
}
});
}
Update: and you could call this function directly from within your existing code (I've amended the function to use a LatLng rather than individual latitude and longitude values:
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
});
createStreetMap('yourStreetViewDiv', results[0].geometry.location);
}
There are a couple issues with your code. Fix them first:
64 Uncaught ReferenceError: berkeley is not defined
Also, you'll need to set a zoom and mapTypeId options on your Map before anything shows.
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.