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>
Related
I am working on a tracking system for my laptop, I used google map api to view the current location on a map...
The height % stopped working, but only for the map canvas
Why is this?
Here is the code (sorry a little messy, still sort of a noob...)
var pass_entered;
var pass_entered2;
var password="P#sSWORD";
var randomstring = Math.random().toString(36).slice(-5);
X = document.cookie.split("=")[1]
if ( X != "logged on" ) {
while (pass_entered!=password) {
pass_entered=prompt('PASSWORD REQUIRED FOR ACCESS:','');
if (pass_entered!=password){
alert("Warning! incorrect password entered");
}}}
document.cookie = "logon= logged on; path=/";
self.close();
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Find your device</title>
<style>
body{
height: 100;
}
.status{
background-color:#00003D;
}
#panel{
background-color:#CC2900;
}
#map-canvas{
background-color:#008F00;
height: 80;
margin: 0px;
padding: 10px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 15,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = "Fortville,Indiana";
geocoder.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('Sorry, It seems something went wrong finding the location of your device error code:' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<br>
<input type="button" value="Refresh location" onclick="codeAddress();">
<button id="lost_on" onclick="window.open( 'lost.php' , '_blank' );">Turn on lost mode</button>
<button id="lost_off" onclick="window.open( 'lost_off.php' , '_blank' );">Turn off lost mode</button>
Please note you need to manually refresh the location!
</div>
<center>
<div id="map-canvas"></div>
<br>
<iframe class="status" src="status.php" height=40 frameborder="0" ><iframe/>
</center>
</body>
<p> Code is modified code from google map api geocoding service</p>
</html>
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>
I`m trying to Update markers position every X time and wonder what is the best way to do that and if there is good example for it.
my code is:
<?php
include 'connect.php';
$json= array();
$res = "SELECT LatLon,fname FROM customers";
$res = mysql_query($res);
while($r = mysql_fetch_assoc($res)) {
$XY = explode(",",$r['LatLon']);
$json[]= array($r['fname'],$XY[1],$XY[0]);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
var map;
// Cretes the map
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// This function takes an array argument containing a list of marker data
function generateMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
}
}
</script>
</head>
<body>
<div id="map" style="width: 1000px; height: 700px;"></div>
<script type="text/javascript">
window.onload = function () {
initialize();
var locations = <?php echo json_encode($json); ?>;
//setInterval(function(){generateMarkers(locations);},1000);
generateMarkers(locations);
};
</script>
</body>
</html>
I need to put the data in other file? if yes how to do that? and how I can make the refresh only on the markers and not on the page.
any suggestions?
thanks!
Using JQuery $.ajax();
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
var map;
// Cretes the map
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// This function takes an array argument containing a list of marker data
function generateMarkers(locations) {
for (var i = 0; i < locations.length; i++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
}
}
</script>
</head>
<body>
<div id="map" style="width: 1000px; height: 700px;"></div>
<script type="text/javascript">
window.onload = function () {
initialize();
setInterval(function()
{
$.ajax({
url: "http://yoursite.com/location.php",
type: "POST",
data: {func: 'getLocation'},
success: function(data) {
generateMarkers(data);
}
});
}, 1000);
};
</script>
</body>
</html>
location.php:
<?php
include 'connect.php';
if (isset($_POST['func']) && $_POST['func'] === 'getLocation')
{
echo getLocation();
function getLocation()
{
$json= array();
$res = "SELECT LatLon,fname FROM customers";
$res = mysql_query($res);
while($r = mysql_fetch_assoc($res)) {
$XY = explode(",",$r['LatLon']);
$json[]= array($r['fname'],$XY[1],$XY[0]);
}
return $json;
}
}
?>
Try it!
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'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>