This works well enough but I was wondering how I could suspend the script after a user hovers their mouse over it. Is there some command within the API that would help me do this? What about just some kind of function suspension?
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var panorama;
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 4,
pitch: 10
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
var i = 0;
window.setInterval(function () {
panorama.setPov({
heading: i,
pitch: 10,
zoom: 1
});
i += 0.1;
}, 10);
}
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>
You can use this great tool to generate an embed code for your site: http://virali.se/photo/spin/
It also uses Google API.
Editing your code you can add the following:
$("#pano").on("mouseenter", function () {
move = false;
});
$("#pano").on("mouseleave", function () {
move = true;
});
...
if (move) { i += 0.1; }
Demo in this JSFIDDLE.
Related
JSFiddle reproducing the issue.
I am adding a custom button to the top center of the map. I have a click event attached to the map that will fadeIn the button. A rightclick event on the map that will fadeOut the button.
To reproduce the issue:
Right click on the map to fadeOut the button.
Increase/decrease zoom level by at least one level.
Left click to fadeIn the button.
At this point the button will fade back in at a location different
than its original location.
Increase/decrease zoom level by at least one level.
You will then see the button snap back to its original location.
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(41.508742, -0.120850),
zoom: 7,
disableDefaultUI: true
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var btn = document.getElementById('myButton');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);
map.addListener('click', function() {
jQuery('#myButton').fadeIn();
});
map.addListener('rightclick', function() {
jQuery('#myButton').fadeOut();
});
.button {
display: block;
}
#map {
width: 300px;
height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="map"></div>
<button class="button" id="myButton">asdf</button>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>
That looks like a potential bug with the control positions on the Map object. You may want to file a bug on Google's Public Issue Tracker.
As a workaround, you could try removing the button on the rightclick from the Map controls (with a slight timeout to let the fadeout effect complete), then readding it back to the map on the left click.
Simple sample JSBin
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Custom Controls</title>
<style>
.button {
display: block;
width: 70px;
}
#map {
width: 300px;
height: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_KEY" async defer></script>
<script>
function initMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(41.508742, -0.120850),
gestureHandling: 'greedy',
zoom: 7,
disableDefaultUI: true
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var btn = document.getElementById('myButton');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);
map.addListener('click', function() {
if (!jQuery('#myButton').is(":visible")) {
map.controls[google.maps.ControlPosition.TOP_CENTER].push(btn);
jQuery('#myButton').fadeIn();
}
});
map.addListener('rightclick', function() {
if (jQuery('#myButton').is(":visible")) {
jQuery('#myButton').fadeOut();
setTimeout(function(){ map.controls[google.maps.ControlPosition.TOP_CENTER].pop(btn); }, 500)
}
});
}
</script>
</head>
<body>
<div id="map"></div>
<button class="button" id="myButton">asdf</button>
</body>
</html>
I uploaded a street view with the code taken from Google Apis. If i click far from my position or use the arrows the pano change and I would avoid this, then is possible delete the connections with the other pano or obtain single panoramic photo to run itself like google views?
The code is simply that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View containers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position: bryantPark,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I wish that this panoramic photo function precisely or as those of https://www.google.com/maps/views/home?gl=us&hl=it like this one: https://www.google.com/maps/views/view/105558295291738522367/gphoto/5999530155782979586?gl=us&hl=it&heading=33&pitch=90&fovy=75
This is not linked to other panoramas , unlike the street view which is connected to other pano images.
If you don't want links, set the linksControl StreetViewPanoramOption to false.
linksControl: false
code snippet:
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position: bryantPark,
linksControl: false,
clickToGo: true,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
I'm starting with jQueryMobile and wanted to display a map using OpenLayers. However I'm having a weird issue. Here is the almost working code. Sorry I couldn't make a fiddle, however you can test it easily with copy/paste on notepad or whatever.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
html ,body {
margin: 0;
padding: 0;
height: 100%;
}
.ui-content {
padding: 0;
}
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<div id="basicMap"></div>
</div>
</div>
<script>
function init() {
map = new OpenLayers.Map("basicMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
});
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom = 3;
map.addLayer(mapnik);
map.setCenter(position, zoom );
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(position);
marker.events.register("click", map , function(e){ alert("click");
});
markers.addMarker(marker);
}
$(document).on("pagecreate","#pageone",init());
</script>
</body>
</html>
This code doesn't show the map.
Now if you take off the following line :
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
You can see that the map is showing.
Any idea on how can I solve this ? because I think it can be solved easily but can't see how.
Thank you.
I knew it was stupid, if it can interest someone , the css should be like :
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
display : block;
}
And call JS :
$(document).ready(init());
Don't know however why this works.
I tried different approaches which I found on this site and in web but they don't work for me(
This is my code:
<h:panelGroup id="GMWrapper" style="background-color: red">
<p:gmap widgetVar="mainMap" center="49.835, 24.0083" zoom="15"
id="mainGoogleMap" type="HYBRID"
style="width: 600px; height: 400px" model="#{userPlaces.model}"
styleClass="gmappStyle" onPointClick="handlePointClick(event)" />
<p:commandButton onclick="someFunc()"></p:commandButton>
<script type="text/javascript">
function someFunc() {
if (navigator.geolocation) {
alert("Start")
navigator.geolocation
.getCurrentPosition(success);
alert("Successful!")
var elem = document
.getElementById("mainGoogleMap");
alert("Element was find")
elem.setCenter(new google.maps.LatLng(37.4419, -122.1419));
alert("Good done!");
} else {
error('Geo Location is not supported');
currentLat = 0.0;
currentLng = 0.0;
}
}
var currentLat;
var currentLng;
function success(position) {
currentLat = position.coords.latitude;
currentLng = position.coords.longitude;
}
</script>
</h:panelGroup>
Javascript code works to alert("Element was find")
Also I tried:
elem.setAttribute("center", currentLat.toString() + ", " + currentLng.toString());
elem.setAttribute("center", currentLat + ", " + currentLng);
elem.setAttribute("center", "37.4419, -122.1419");
and few other..
From the google maps docs: panTo(latLng:LatLng|LatLngLiteral) - Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated. Below is a snippet that creates a map and centers the map at a location.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<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 map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.panTo(new google.maps.LatLng(37.4419, -122.1419));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>