Hello i m using Google API v 3.0 for showing street view,but street view is not showing for a prticular point but maps.google.com is showing street view for this location. where i m wrong.
My code is below :-
<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var latitude=null;
var longitude=null;
var fenway;
var map;
var panoramaOptions;
function initialize() {
var value = '950 COUNTRY CLUB DRIVE, MORAGA 94556 ';
alert("value"+value);
var infoWindow = new google.maps.InfoWindow;
$.ajax({
url:"http://maps.googleapis.com/maps/api/geocode/json?address="+value+"&sensor=false",
type: "POST",
success:function(res){
latitude=res.results[0].geometry.location.lat;
alert("latitude"+latitude);
longitude=res.results[0].geometry.location.lng;
alert("longitude"+longitude);
}
});
fenway = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
For the street view you can refer to this API https://developers.google.com/maps/documentation/streetview/
Here you can change FOV, pitch heading. Hope this helps
Related
Current behaviour: The page constantly refreshes my location and the entire map.
Desired behaviour: I only want to find and display the current location once, not continuously.
How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>whereami</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="cordova.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= xyz " type="text/javascript"></script>
<script type="text/javascript">
function onSuccess(position) {
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions = {zoom: 17,center: myLatlng}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({position: myLatlng,map: map});
}
function onError(error) {}
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 0 });
google.maps.event.addDomListener(window, 'load', onSuccess);
</script>
</head>
<body>
<div id="geolocation"></div>
<div id="map-canvas"></div>
</body>
</html>
Don't keep recreating the map. Create the map once (in an "initMap" function), center the map an place the marker in the watchPosition callback function.
jsfiddle
// global variables
var map, marker, polyline;
function initMap() {
// initialize the global map variable
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 0,
lng: 0
},
zoom: 1
});
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
timeout: 5000
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function onSuccess(position) {
var lat = position.coords.latitude;
var lang = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, lang);
map.setCenter(myLatlng);
map.setZoom(18);
if (marker && marker.setPosition)
marker.setMap(myLatlng); // move the marker
else // create a marker
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
function onError(error) {
console.log('ERROR(' + error.code + '): ' + error.message);
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="geolocation"></div>
<div id="map-canvas"></div>
I have been trying to find a way to set the location on peg man in google maps via programming instead of dragging and dropping.Is there a way to set the location of pegman on google maps programmatically?
better late than never, but you're looking for the pano function setPosition
setStreetView sets the pano view, but setPosition should place pegman.
May be the below code will be helpful to you :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
If I click on a markercluster, it doesn't show the marker with a title. Here's my test 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></title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=-my-key-&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
var map;
var myCenter = new google.maps.LatLng(55.34943850000000, 11.12281580000000);
var customers = [
['Place1', 55.34943850000000, 11.12281580000000],
['Place2', 55.34943850000000, 11.22281580000001]
];
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 7,
center: myCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map);
}
function setMarkers(map) {
var markers = [];
for (var i = 0; i < customers.length; i++) {
var customer = customers[i];
var myLatLng = new google.maps.LatLng(customer[1], customer[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: customer[0]
});
markers.push(marker);
}
var CLUSTER_MINIMUM_SIZE = 1;
var markerCluster = new MarkerClusterer(map, markers, { minimumClusterSize: CLUSTER_MINIMUM_SIZE });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Any idea if I'm doing something wrong or there's a bug in MarkerCluster?
Thanks
Mojo
Sorry-> but i'm K.O. with it
I just want my cooord.json file (coming from php/mysql request) to be taken in the javascript's parameters to create marker and display its on the map
first my html code
two myjson file
Thanks
Desbutes
<!DOCTYPE html>
<html>
<head>
<title>Développez avec les API Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
height: 100%;
}
</style>
<!-- http://www.fsupoitiers.fr/mouvement/coorrdon.json -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false" ></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(46.587953, 0.34611);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var url = 'http://www.fsupoitiers.fr/mouvement/coorrdon.json';
$.getJSON('http://www.fsupoitiers.fr/mouvement/coorrdon.json', function(data) {
map= new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds=new google.maps.LatLngBounds();
infowindow = new google.maps.InfoWindow({
content: 'ec_ville'
});
$.each(data, function(index, c) {
var latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']);
var marker = new google.maps.Marker({
map: map,
position: latlng,
title:'ec_nom:'+c.ec_nom
});
bounds.extend(latlng);
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent('ec_nom:'+c.ec_nom);
infowindow.open(map, marker);
});
});//close each
map.fitBounds(bounds);
});//close getjson
}//close initialize
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
And now my coord.json file
{"lat":"46.8529510","lng":"0.5433920","ec_nom":"ANTRAN","ec_type":"ECOLE ELEM","ec_adresse":"PLACE DE L EGLISE","ec_ville":"ANTRAN","ec_cp":"86100"}
If you read until here, tht's you've readed the code so ...... thanks again
i am trying to call javascript inside the google maps infoWindow() but no luck. anyone know how to solved this issue? my coding as below:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var image = 'image.png';
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(3.101669,101.635793),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myHtml = "<script type='text/javascript'>alert('test');<\/script>";
var infowindow = new google.maps.InfoWindow({content: myHtml});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(3.09667,101.635793),
map: map,
title:"Hey, I'm here!",
<!--icon: image-->});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);});
infowindow.open(map,marker);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; margin:1.5em 13.6em 1.5em 2em;">
</div>
</body>
</html>
fix this line
var myHtml = "<script type='text/javascript'>alert('test');<\/script>";
to this
var myHtml = "<scr"+"ipt type='text/javascript'>alert('test');</scr"+"ipt>";