i'm trying to figure out the code shown of this page with the V2 https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/streetview-data?hl=es for the V3 of googlemaps but i can't refresh the position of the orange icon when navigating with the streetview.... any ideas?
Another point... how can i get the actual lat long when navigating on both views?
Here's some code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Zone -</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
</script>
<script>
$(function(){
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
initialize();
});
var map;
var myPano;
var panoClient;
var nextPanoId;
var panorama;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var fenwayPark = new google.maps.LatLng(42.345573,-71.098326);
var fenwayPOV = {yaw:370.64659986187695,pitch:-20};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
panoClient = new google.maps.StreetViewService();
//map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(fenwayPark, 15);
google.maps.event.addListener(map, "click", function(overlay, latlng) {
// latlng will be null if the info window has been clicked.
if (latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
}
});
var panoramaOptions = {
position: fenwayPark,
pov: {
heading: 34,
pitch: -20
}
};
myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
//map.setStreetView(myPano);
myPano.setPano(fenwayPark, fenwayPOV);
google.maps.event.addListener(myPano, "error", handleNoFlash);
panoClient.getPanoramaByLocation(fenwayPark, 50, processSVData);
//myPano.setStreetView(myPano);
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
myPano.setPano(markerPanoID);
myPano.setPov({
heading: 270,
pitch: 0,
zoom: 1
});
myPano.setVisible(true);
});
}
}
</script>
</head>
<body>
</body>
</html>
Related
I am creating a wp8 application , and I am using this html code to display 2 pushpins and the directions between them but the problem is that the directions are displayed without the map (on the emulater the html page is all displayed without problem).
There is my Html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Amex</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var rendererOptions = {
draggable: false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var ksa = new google.maps.LatLng(24.7116667, 46.7241667);
function initialize() {
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: ksa
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute() {
var request = {
origin: new google.maps.LatLng(23.7116667, 45.7241667),
destination: new google.maps.LatLng(20.7116667, 45.7241667),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
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";
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div id="directionsPanel" style="width:100%;height 20%;font-family:arial">
<p>Total Distance: <span id="total"></span></p>
</div>
</body>
</div>
</body>
</html>
I have find the solution It is just need to replace this
<div id="map_canvas" style="width:100%; height:80%"></div>
by this
<div id="map_canvas" style="width:300px; height:480px"></div>
Alert is not showing when I mouse over on driving route,
can any body help me?
I tried every thing but not works on driving route mouse over.
Note: I am doing this on driving route mouse over not on polyline.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Travel modes in directions</title>
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
var points=[];
function calcRoute() {
var selectedMode = document.getElementById('mode').value;
var request = {
origin: haight,
destination: oceanBeach,
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
var myRoute = response.routes[0].legs[0];
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
for (var i = 0; i < myRoute.steps.length; i++) {
for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) {
points.push(myRoute.steps[i].lat_lngs[j]);
}
}
}
});
alert("points "+points);
var eventLine = new google.maps.Polyline({
path: points,
visible: true,
strokeOpacity: 0,
zIndex: 1000
});
eventLine.setMap(map);
google.maps.event.addListener(eventLine, "mouseover", function() {
alert("hi")
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Mode of Travel: </b>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="map-canvas"></div>
</body>
</html>
The DirectionsService doesn't have a mouseover event, a Polyline does. Your code works for me if I move the polyline creation into the DirectionsService callback:
http://www.geocodezip.com/v3_SO_directionsMouseOver.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Travel modes in directions</title>
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
var points=[];
function calcRoute() {
var selectedMode = document.getElementById('mode').value;
var request = {
origin: haight,
destination: oceanBeach,
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
var myRoute = response.routes[0].legs[0];
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
for (var i = 0; i < myRoute.steps.length; i++) {
for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) {
points.push(myRoute.steps[i].lat_lngs[j]);
}
}
// alert("points "+points);
var eventLine = new google.maps.Polyline({
path: points,
visible: true,
strokeOpacity: 0,
zIndex: 1000
});
eventLine.setMap(map);
google.maps.event.addListener(eventLine, "mouseover", function() {
alert("hi")
});
} else { alert("Directions request failed: "+status); }
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Mode of Travel: </b>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="map-canvas"></div>
</body>
</html>
Using this solution, I was able to successfully map two locations using this source code below. How do I add a third or fourth location as a waypoint in between the beginning and end locations? I tried to add a second end point but that did not work?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var Center=new google.maps.LatLng(18.210885,-67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var properties = {
center:Center,
zoom:20,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
map=new google.maps.Map(document.getElementById("map"), properties);
directionsDisplay.setMap(map);
var marker=new google.maps.Marker({
position:Center,
animation:google.maps.Animation.BOUNCE,
});
marker.setMap(map);
Route();
}
function Route() {
var start = new google.maps.LatLng(18.210885,-67.140884);
var end =new google.maps.LatLng(18.211685,-67.141684);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else { alert("couldn't get directions:"+status); }
});
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I think, you would be comfortable to use a Polyline.
Try this variant:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex polylines</title>
<link rel="stylesheet" type="text/css" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(18.210885,-67.140884);
var mapOptions = {
zoom: 20,
center: chicago,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(18.210885,-67.140884),
new google.maps.LatLng(18.211685,-67.141114),
new google.maps.LatLng(18.211685,-67.141684)
];
var polyOptions = {
path: lineCoordinates,
strokeColor: '#dd4b39',
strokeOpacity: 1.0,
strokeWeight: 5
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
for (i = 0; i <= lineCoordinates.length; i++)
{
if (lineCoordinates[i] !== undefined)
{
new google.maps.Marker({
position: lineCoordinates[i],
title: 'some title',
map: map
});
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I've put together the code below to load marker data from my SQL database which correctly shows all of the information held.
I'd like to now include a drop down menu that shows the markers by their 'Location Name' and when the user selects the location the associated marker bounces. I know from some of the information that I've found that this is a sidebar? Could someone perhaps please point me in the right direction as to how I would go about adapting my code to include this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var marker = new google.maps.Marker({
map: map,
position: point,
});
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onLoad="load()">
<div id="map"
</div>
</body>
</html>
UPDATE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
Location Name
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
// Change this depending on the name of your PHP file
downloadUrl("mapmyfindsloadalllocations.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var finds = markers[i].getAttribute("finds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var icon = customIcons[finds] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
title: locationname + ' - ' + address,
icon: icon.icon,
shadow: icon.shadow
});
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script type="text/javascript">
function animate(element) {
var marker = getMarkerByName(element.title);
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() { marker.setAnimation(null); }, 200); }
function getMarkerByName(name) {
// retrieve and return the marker from where you stored it }
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
<label></label>
</body>
</html>
Here's an idea:
Associate each location name with the link in the drop down menu.
Store the marker for each location.
When you click a link from the drop down menu, retrieve the marker associated with that location and simply call a function that animates it:
....
<!-- assuming this is an item from the menu -->
Location Name
....
The script:
<script type="text/javascript">
function animate(element) {
var marker = getMarkerByName(element.title);
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() { marker.setAnimation(null); }, 200);
}
function getMarkerByName(name) {
// retrieve and return the marker from where you stored it
}
</script>
...
Something like that
UPDATE:
There is basically no change... when you click the link, highlight it and call the animate function.
For highlighting the correct link on marker click, "listen" for click on each marker:
google.maps.event.addListener(marker, 'click', function(event) {
// animate marker
// highlight the link associated with the marker.
});
Hello all I have been working on this for awhile and have looked all over. I want to load markers with a mouse click on a button instead of when the map loads. I need a little push in the right direction. I am doing this local so I don't have a link. thanks for any help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
function initialize() {
var washington = new google.maps.LatLng(47.7435, -122.1750);
var myOptions = {
zoom: 7,
center: washington,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
boats(map, seller);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];
function boats(map, markers) {
for (var i = 0; i < markers.length; i++) {
var seller = markers[i];
var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
var marker = new google.maps.Marker({
position: sellerLatLng,
map: map,
title: seller[0],
zIndex: seller[3],
html: seller[4]
});
var contentString = "content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<button id="boats" onClick="boats()">Boats</button>
</body>
</html>
Above function initialize() put:
var map = null;
Remove the var before map in initialize to read:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Comment or remove boats(map, seller); in initialize
Change button to include the parameters of the boats function:
<button id="boats" onClick="boats(map, seller);">Boats</button>
Complete Code Block:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
var washington = new google.maps.LatLng(47.7435, -122.1750);
var myOptions = {
zoom: 7,
center: washington,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];
function boats(map, markers) {
for (var i = 0; i < markers.length; i++) {
var seller = markers[i];
var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
var marker = new google.maps.Marker({
position: sellerLatLng,
map: map,
title: seller[0],
zIndex: seller[3],
html: seller[4]
});
var contentString = "content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<button id="boats" onClick="boats(map, seller);">Boats</button>
</body>
</html>