Achei esta pagina com varios exemplos muito loucos…
Que massa!!! Obrigado por compartilhar, William
Show! Vai ser de muita valia!
Olá a todos.
Segue um código que montei utilizando os exemplos. Ainda tem o que fazer, mas já serve de base:
[code]
Teste #map{ width: 100%; height: 480px; } .mapIconLabel {
font-size: 11px;
font-weight: bold;
color: #000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/markerwithlabel.js"></script>
<script>
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers used by the side_bar
var gmarkers = [];
var map = null;
var sv = new google.maps.StreetViewService();
var clickedMarker = null;
var panorama = null;
// Create the shared infowindow with three DIV placeholders
// One for a text string, oned for the html content from the xml, one for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
content.appendChild(title);
var streetview = document.createElement("DIV");
streetview.style.width = "400px";
streetview.style.height = "200px";
content.appendChild(streetview);
var htmlContent = document.createElement("DIV");
content.appendChild(htmlContent);
var infowindow = new google.maps.InfoWindow({
//size: new google.maps.Size(750,480),
content: content
});
function createMarker(map, latlng, label, html) {
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new MarkerWithLabel({
//var marker = new google.maps.Marker({
position: latlng,
map: map,
title: label,
icon: iconnew,
draggable: false,
raiseOnDrag: false,
labelContent: ""+label,
labelClass: "mapIconLabel", // the CSS class for the label
labelInBackground: false,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
marker.myHtml = label;
google.maps.event.addListener(marker, "click", function() {
clickedMarker = marker;
sv.getPanoramaByLocation(marker.getPosition(), 50, processSVData);
//infowindow.setContent(contentString);
//infowindow.open(map,marker);
openInfoWindow(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + label + '<\/a><br>';
//return marker;
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = clickedMarker;
openInfoWindow(clickedMarker);
if (!!panorama && !!panorama.setPano) {
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
//zoom: 1
});
panorama.setVisible(true);
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
//zoom: 1
});
panorama.setVisible(true);
});
}
} else {
openInfoWindow(clickedMarker);
title.innerHTML = clickedMarker.getTitle() + "<br>Street View data not found for this location";
htmlContent.innerHTML = clickedMarker.myHtml;
panorama.setVisible(false);
// alert("Street View data not found for this location.");
}
}
jQuery(function(){
var stops = [
{"Geometry":{"Latitude":-18.715983,"Longitude":-39.879578}},
{"Geometry":{"Latitude":-18.715973,"Longitude":-39.879599}},
{"Geometry":{"Latitude":-18.716690,"Longitude":-39.881885}},
{"Geometry":{"Latitude":-18.715308,"Longitude":-39.886574}},
{"Geometry":{"Latitude":-18.716334,"Longitude":-39.882862}},
{"Geometry":{"Latitude":-18.713570,"Longitude":-39.880372}},
{"Geometry":{"Latitude":-18.714302,"Longitude":-39.887636}},
{"Geometry":{"Latitude":-18.715684,"Longitude":-39.888441}},
{"Geometry":{"Latitude":-18.716175,"Longitude":-39.872458}},
{"Geometry":{"Latitude":-18.716954,"Longitude":-39.886831}},
{"Geometry":{"Latitude":-18.715968,"Longitude":-39.858677}},
{"Geometry":{"Latitude":-18.724442,"Longitude":-39.855138}},
{"Geometry":{"Latitude":-18.715671,"Longitude":-39.873998}},
{"Geometry":{"Latitude":-18.715983,"Longitude":-39.879578}}
] ;
var map = new window.google.maps.Map(document.getElementById("map"));
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer({suppressMarkers: true});
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
window.tour.fitBounds(map);
if (stops.length > 1)
window.tour.calcRoute(directionsService, directionsDisplay);
});
function Tour_startUp(stops) {
if (!window.tour) window.tour = {
updateStops: function (newStops) {
stops = newStops;
},
loadMap: function (map, directionsDisplay) {
var myOptions = {
zoom: 15,
center: new window.google.maps.LatLng(-18.715983,-39.879578),
mapTypeId: window.google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
map.setOptions(myOptions);
directionsDisplay.setMap(map);
//directionsDisplay.setPanel(document.getElementById('results')); //caminhos
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
},
fitBounds: function (map) {
var bounds = new window.google.maps.LatLngBounds();
// extend bounds for each record
jQuery.each(stops, function (key, val) {
var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
bounds.extend(myLatlng);
});
map.fitBounds(bounds);
},
calcRoute: function (directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length > 0;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < stops.length; j++) {
subitemsCounter++;
subBatch.push({
location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < stops.length;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
var directionsResultsReturned = 0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin: start,
destination: end,
waypoints: waypts,
travelMode: window.google.maps.TravelMode.DRIVING,
optimizeWaypoints: true
};
(function (kk) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = { order: kk, result: result };
unsortedResults.push(unsortedResult);
directionsResultsReturned++;
if (directionsResultsReturned == batches.length) { // we've received all the results. put to map
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
var legs = combinedResults.routes[0].legs;
for (var i=0; i < legs.length;i++){
var marker = createMarker(directionsDisplay.getMap(),legs[i].start_location,"marker"+i,"some text for marker "+i+"<br>"+legs[i].start_address);
}
var i=legs.length;
var marker = createMarker(directionsDisplay.getMap(),legs[legs.length-1].end_location,"marker"+i,"some text for the "+i+"marker<br>"+legs[legs.length-1].end_address);
}
document.getElementById("results").innerHTML = side_bar_html;
}
});
})(k);
}
}
};
}
var pin = new google.maps.MVCObject();
google.maps.event.addListenerOnce(infowindow, "domready", function() {
panorama = new google.maps.StreetViewPanorama(streetview, {
navigationControl: false,
enableCloseButton: false,
addressControl: false,
linksControl: false,
visible: true
});
panorama.bindTo("position", pin);
});
// Set the infowindow content and display it on marker click.
// Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
function openInfoWindow(map,marker) {
title.innerHTML = marker.getTitle();
htmlContent.innerHTML = marker.myHtml;
pin.set("position", marker.getPosition());
infowindow.open(map,marker);
}
var iconnew = {
url: "newicons/tag.svg",
anchor: new google.maps.Point(0,20),
scaledSize: new google.maps.Size(40,40)
};
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("total").innerHTML = total + " km";
}
google.maps.event.addDomListener(window, 'resize', Tour_startUp);
google.maps.event.addDomListener(window, 'load', Tour_startUp);
</script>
</head>
Total Distance:
<script language="javascript">
//var OpenWindow = window.open("_blank", "", '');
var contents = document.getElementById("printer");
OpenWindow.document.write(contents.innerHTML);
</script>
<a href="#" onclick="javascript:this.style.display='none';window.print();this.style.display='';">Imprimir</a>
</div>
Boa rochajl. Obrigado por compartilhar.