I have a page where I am loading google maps. I use getCurrentPosition over http and even I receive a warning from google api. The problem is that it breaks also the javascript and that ruins everything. The code was working for quite some time but the last week things broke.
Below is the html and script. You can add it in html and run it and see (tried with stackoverflow but had some issues with the script)
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
<header class="desktop">
</header>
<div id="st-container" class="st-container">
<div class="st-pusher">
<div class="st-content">
<div class="st-content-inner">
<div class="logo-mobile">
</div>
<section class="map-sections">
<div style="position: absolute; z-index: 1000; width: 100%; margin-top: 30px;">
<div class="row">
<div class="large-12 columns">
<div class="filter clearfix">
<input type="text" id="search-field" placeholder="Search place">
<span>eller...</span>
Search near you
</div>
</div>
</div>
</div>
<div id="google_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript">
function showMap(userPos) {
if (!!navigator.geolocation) {
var map;
if (userPos == 'true') {
var mapOptions = {
zoom: 12,
enableHighAccuracy: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else {
var mapOptions = {
zoom: 5,
enableHighAccuracy: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function (position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var sectionList = [
['Stockholm', 59.327, 18.067],
['Göteborg', 57.70889, 11.97348]
];
var mapPinUser = '/dist/img/map-pin-user.png';
var mapPinSection = '/dist/img/map-pin-section.png';
// User's position
var marker = new google.maps.Marker({
position: geolocate,
map: map,
icon: mapPinUser,
title: "ok"
});
for (var i = 0; i < sectionList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(sectionList[i][1], sectionList[i][2]),
map: map,
icon: mapPinSection,
id: i,
animation: google.maps.Animation.DROP,
title: sectionList[i][0]
});
}
if (userPos == 'true') {
map.panTo(geolocate);
}
else {
map.setCenter({ lat: 61.58549, lng: 15.02930 });
}
});
} else {
document.getElementById('google_canvas').innerHTML = 'No Geolocation Support.';
}
}
showMap('false');
</script>
<style>
#google_canvas {
height: 65vh;
}
</style>
</section>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>
</html>
getCurrentLocation is only supported over https:// now on Chrome.
There has been a warning in place in the javascript console in Chrome for quite a while, and it was announced a while ago.
reference from your comment
Starting with Chrome 50, Chrome no longer supports obtaining the user’s location using the HTML5 Geolocation API from pages delivered by non-secure connections. This means that the page that’s making the Geolocation API call must be served from a secure context such as HTTPS.
Related
I'm building a web application using Google Street View andh HTML / Javascript.
I'd like to enable / disable the arrows controls that are on the images.
I can't show examples to do it ...
Suggestions / examples?
I've solved in this way ...
<html>
<head>
<meta charset="utf-8">
<title>test Street View</title>
<style>
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 95vw;
height: 95vh;
}
td {
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div id="maps-images">
<center>
<table border=1>
<!-- first row -->
<tr id="row1">
<td id="g_map">
<div id="google_map" style="width:100%;height:100%"></div>
</td>
<td id="google-street-view">
<div id="google-street-view_images" style="width:100%;height:100%"></div>
</td>
</tr>
</table>
</center>
</div>
<script>
var panorama;
function initialize() {
//### The original pegman position ...
var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
var marker;
//### Add Google Map ...
var google_map = new google.maps.Map(document.getElementById('google_map'), {
center: pegman_position,
zoom: 16
});
//### Add Google Street View ...
window.panorama = new google.maps.StreetViewPanorama(
document.getElementById('google-street-view_images'), {
position: pegman_position,
pov: {
heading: 34,
pitch: 10
}
});
google_map.setStreetView(window.panorama);
//### Modify Street View controls ...
var panoOptions = {
scrollwheel: false,
disableDefaultUI: true,
clickToGo: false
};
window.panorama.setOptions(panoOptions);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_APIKEY_HERE&callback=initialize">
</script>
</body>
</html>
In this section I've configured the options ...
//### Modify Street View controls ...
var panoOptions = {
scrollwheel: false,
disableDefaultUI: true,
clickToGo: false
};
window.panorama.setOptions(panoOptions);
Now I'm able to manage how to enable / disable controls on Street View images ...
Can someone help me please I don't understand javascript
<script type="text/javascript">
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(31.6321288,-8.0099319,787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLatLng = new google.maps.LatLng(31.6321288,-8.0099319,787);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: "We Are Here"
});
</script>
According to the Google Documentation, it is as follows.
Make sure you include this line in your html tag and get your Google Map API Key to replace the YOUR_API_KEY
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
1 - You need to create a Google Maps project and generate an API KEY (https://console.developers.google.com). It's very simple and fast.
2 - So, you need to import GoogleMapsAPI, changing YOUR_API_KEY for your API KEY:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
The result is something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat:31.6321288, lng:-8.0099319};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Hej. Google maps turns up grey in the browser, but can see the markers and the google logo in the bottom right corner.
Have tried the resize function, but still won't work.I am using bootstraps col.
I can see it works here, but it doesn't.
Thanks for the help.
function initialize() {
var myOrigin = new google.maps.LatLng(56.63914, 9.79765);
var mapProp = {
center: myOrigin,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var myCenter = new google.maps.LatLng(56.157165, 10.207644);
var marker = new google.maps.Marker({
position: myCenter,
title: 'Click to zoom'
});
marker.setMap(map);
var myCenter2 = new google.maps.LatLng(57.04661, 9.924479);
var marker2 = new google.maps.Marker({
position: myCenter2,
title: 'Click to zoom'
});
marker2.setMap(map);
/*On marker click, it zooms to 19*/
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(19);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker2, 'click', function () {
map.setZoom(19);
map.setCenter(marker2.getposition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#googleMap {
height:350px;
width:100%;
}
<body>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="googleMap"></div>
</div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</body>
If you check the Getting Started for JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
NOTE:
If you're using the API under the standard plan, you must use a browser key (a type of API key) set up in a project of your choice. See more about API keys for the standard API.
I am trying to generate map onclick on same division and same variable "map" using following script, it's not functioning, I don't know how to destroy old map and recreate please someone help me.. this is what I have tried so far..
Here is link to fiddle
JS
function map(lat,lon){
jQuery(document).ready(function () {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
});
}
var lat =22, lon = 75;
map(lat,lon);
HTML
<div id="map"></div>
<button onclick="map(15,90)" >15 90</button>
<button onclick="map(22,80)" >22 80</button>
CSS
#map {
height: 300px;
width: 500px;
}
button{ width:70px;height:40px;}
function map(lat,lon){
// jQuery(document).ready(function () {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
//});
}
i didn't make test for it, just look through to check the syntax
i test it, your fiddle's issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<style type='text/css'>
#map { height: 300px; width: 500px; }
button { width: 70px; height: 40px;}
</style>
<script type='text/javascript'>
function map(lat, lon) {
var centerPosition = new google.maps.LatLng(lat, lon);
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
}
</script>
</head>
<body>
<div id="map"></div>
<button onclick="map(15,90)">15 90</button>
<button onclick="map(22,80)">22 80</button>
</body>
</html>
In this google map sample: http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
If the user dropped the little guy far away in the middle of the ocean for example, it disappears.
But in the main google map website http://maps.google.com/ If you made it show the street view, and the user dragged the guy away it get back automatically to the previous point.
What is missed in the first example to make it behave the same as the google map website?
here is the code of the sample:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<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>
To do this, add an event listener to position_changed and use it to store the last (valid) location that pegman was dropped.
google.maps.event.addListener(panorama, 'position_changed', function() {
// Store position
});
And then add an event listener to visibility_changed (which is triggered when pegman is dropped in the ocean) to set him back to the last known location:
google.maps.event.addListener(panorama, 'visible_changed', function() {
if (panorama.getVisible() == false && last_location) {
panorama.setPosition(last_location);
}
});