Thanks in advance for any help!
I have a full page Google Map that I would like to add a toggle button to that applies the webkit invert CSS style to. Problem is, I have no idea how to implement this.
Instead of applying the -webkit-filter: invert(100%); to just an image, I would like to apply it to the entire page with a toggle button.
Any direction would be greatly appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Intel Navigation</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/main.css" rel="stylesheet">
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
</head>
<body>
<div id="google_canvas"></div>
<script>
(function() {
if(!!navigator.geolocation) {
var map;
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
};
map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);
navigator.geolocation.watchPosition(function(position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var image = 'images/current.png';
var marker = new google.maps.Marker({
map: map,
icon: image,
position: geolocate
});
map.setCenter(geolocate);
});
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Lat\'',
from: 'xxxxxx'
}
});
layer.setMap(map);
}
)();
</script>
</body>
</html>
You can simply set that filter on the <html> element:
document.documentElement.style.webkitFilter = 'invert(100%)';
You may want to add more vendor prefix for portability:
var docEl = document.documentElement;
docEl.style.filter || docEl.style.webkitFilter ||
docEl.style.mozFilter || docEl.style.msFilter ||
docEl.style.oFilter = 'invert(100%)';
how about using jquery and looping through all elements ?
$("body").each($(this).css());
Related
I'm making a new app where the user can add the places that he visited on the map, am using flask_googlemaps extension to create the map from a view and i want to add a new marker on this map that get generated from the view .
The markers I've created them manually inside the view,
views.py
#mapapp.route('/gomap')
def gomap():
fullmap = Map(
identifier="fullmap",
varname="fullmap",
style=(
"height:100%;"
"width:100%;"
"top:0;"
"left:0;"
"position:absolute;"
"z-index:200;"
),
cluster=False,
lat=42.8770413,
lng=74.4517747,
markers=[
{
'icon': '//maps.google.com/mapfiles/ms/icons/green-dot.png',
'lat': 42.8770413,
'lng': 74.4513254,
'infobox': "Hello I am <b style='color:green;'>GREEN</b>!"
}
],
zoom="12"
)
return render_template('example_fullmap.html', fullmap=fullmap)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flask Google Maps Full Map Example</title>
<link rel="stylesheet" href="">
{{fullmap.js}}
</head>
<body>
<h1>Flask Google Maps Full Map Example</h1>
{{ fullmap.html }}
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(42.8770413,74.4517747);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"stylers": [{ "saturation": -100 }]}]
};
map = new google.maps.Map(document.getElementById("fullmap"), myOptions);
function placeMarker(location) {
var text = prompt("Комментарий");
var marker = new google.maps.Marker({
position: location,
map: map,
title: text,
icon: {
url: "http://www.suzuki.fr/media/image/interface/map-marker.png",
scaledSize: new google.maps.Size(42, 42)
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize());
</script>
</body>
</html>
If you can see down where am creating a new marker if I clicked on the map, but if I clicked nothing happens, actually the function not calling it self, in the page source I can see my JavaScript codes but in action nothing happens.
You will need to execute the placeMarker() function. May be using self executing function is all you will need:
(function placeMarker(location) {
var text = prompt("Комментарий");
var marker = new google.maps.Marker({
position: location,
map: map,
title: text,
icon: {
url: "http://www.suzuki.fr/media/image/interface/map-marker.png",
scaledSize: new google.maps.Size(42, 42)
}
});
}());
Replace your placeMarker() functions with above self executing method. Make sure you pass proper location to the method.
I am running into this issue while trying to implement a google map for the site that I am maintaining. I am getting the following error from firebug:
TypeError: map is undefined
What did I do wrong?
Note: We just change the domain last week.
Thank you
<div id="mapd" style="width: 100%; height: 550px;"></div>
<script src="https://maps-api-ssl.google.com/maps/api/js?key=mykey&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
var markers = [];
var markers1 = [];
var infoWindow;
function load1() {
map = new google.maps.Map(document.getElementById("mapd"), {
center: new google.maps.LatLng(22.00, 72.22),
zoom: 8,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'dragend', function(ev){
var s = $("#searchcheck").is(':checked');
if(s==true)
{
$('#loading').css('display','block');
$('#loading1').css('display','block');
searchLocationsNear(map.getCenter());
}
});
}
The reason is you haven't added your google map api key in the library. you can find with key word 'myKey' in library.
Get google api key Here
replace "myKey" with the key google provided.
Try again.
Try This Code.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<div id="mapd" style=" width: 100%;
height: 550px;
position: absolute;
z-index: 11;float: inherit;
display: block;"></div>
<script type="text/javascript">
var map;
var markers = [];
var markers1 = [];
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById("mapd"), {
center: new google.maps.LatLng(22.00, 72.22),
zoom: 8,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'dragend', function(ev){
var s = $("#searchcheck").is(':checked');
if(s==true)
{
$('#loading').css('display','block');
$('#loading1').css('display','block');
searchLocationsNear(map.getCenter());
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1TwYksj1uQg1V_5yPUZqwqYYtUIvidrY&callback=initMap"
async defer></script>
</body>
</html>
I am trying to create a map with markers.
But in the below code I can't see the markers.
<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>Google Maps - pygmaps </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script>
<script type="text/javascript">
function initialize() {
var centerlatlng = new google.maps.LatLng(37.427000, -122.145000);
var myOptions = {
zoom: 16,
center: centerlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var latlng = new google.maps.LatLng(37.427000, -122.145000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\D8BFD8.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
var latlng = new google.maps.LatLng(37.428000, -122.146000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\6495ED.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
var latlng = new google.maps.LatLng(37.429000, -122.144000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\000000.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
For example: C:\Python27\lib\site-packages\gmplot\markers\6495ED.png exists by the way. I can see that there are images but images dont appear on the map. Can anyone say how can I fix this situation?
Your path is incorrect. Change it with for example this URL.
https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png
and you will see markers.
You can find more about marker icons here
https://developers.google.com/maps/documentation/javascript/examples/icon-complex?hl=ru
I had an issue with something similar recently and just using forward slashes instead of back slashes fixed it
I'm trying to implement a basic image map of my own. But I got error with my code. It runs into error on the line I highlighted (with **). The map fallbacks to default roadmap. The error message is just "Error" and I have no clue what is going on.
Can you please help look into it?
Many thanks!
My javascript code:
<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 type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my-api-key&sensor=true">
</script>
<script>
// custom map type
var mapTypeOptions = {
getTileUrl: function(coord, zoom) {
return 'http://http://placehold.it/256x256.gif';
},
tileSize: new google.maps.Size(256, 256),
name: 'Some Place',
};
var customMapType = new google.maps.ImageMapType(mapTypeOptions);
// initalize function
function initialize() {
// try to create a new map with custom map type
var mapOptions = {
center: new google.maps.LatLng(22.33173, 114.16061),
zoom: 17,
minZoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.mapTypes.set('ssp', customMapType); // ****
map.setMapTypeId('ssp');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Looks like your missing a config setting
mapTypeControlOptions: {
mapTypeIds: ["ssp"]
}
Also, you need to define maxzoom for mapTypeOptions.
See the example: https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
You've also got some validation errors, remove trailing commas before closing an object.
I was trying to simplify the way I add Google maps to my pages.
I'm using this markup for each map:
<div class="map" data-coordinates="-34.397, 150.644">
<div class="canvas" id="map_canvas"></div>
</div>
and this jquery code:
jQuery(function($) {
var maps = $('.map');
maps.each(function() {
var $this = $(this),
mapId = $this.find('.canvas').attr('id'),
coordinates= $this.data('coordinates');
// set map options
var mapOptions = {
center: new google.maps.LatLng(coordinates),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
});
});
this is a recreation of the tutorial on the google maps website.
when I do it like the tutorial it works fine, but when I use my code above I get the map controls with a grey background, I also tried jQuery(window).load(); with the same result, and the issue seems to be from each() because when I create the map without it, it works fine.
this is the code that works:
<!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 type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There's a problem with coordonates.
google.maps.LatLng() accepts Lat and Lng as separate params, not a composite string.
Try :
jQuery(function($) {
$('.map').each(function() {
var $this = $(this),
canvas = $this.find('.canvas').get(0),
coordinates = $this.data('coordinates').split(/,\s?/);
// set map options
var mapOptions = {
center: new google.maps.LatLng(Number(coordinates[0]), Number(coordinates[1])),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(canvas, mapOptions);
});
});
You might need to test that regexp.