I'm having a stupid hard time with this google maps javascript code. I want to get the return of the radius of a circle that is produced on google maps. Google API offers the code but I have no idea where to put it. I've tried everywhere. Here is the code below. What did I do wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 50% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&libraries=drawing">
</script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(33.65, -84.42),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
},
circleOptions: {
fillColor: '#01939A',
fillOpacity: .4,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load',
initialize).addListener(drawingManager, 'circlecomplete', function(circle)
{
var radius = circle.getRadius();
});
</script>
</head>
<body>
<script type="text/javascript" >
alert(radius);
</script>
<div id="map_canvas"></div>
</body>
</html>
You seem to have a few flow problems here. Trying to use the drawingManager variable, which is bound by the initialize function.
Here: http://jsfiddle.net/RN3QL/ - I've moved the binding of the circle complete function to within the initialize function, and stitched up a few smaller flow issues.
Related
I want to use Google Maps API to pull up a map on the screen. My only requirement is that I want the bounds of the map to stay the same even when someone switches between regular window and fullscreen mode. Here's the script I have put together. It does pull up the map, but when I switch to fullscreen, the view changes:
function initMap() {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(39.051937, -84.721402),
new google.maps.LatLng(39.219590,-84.366564));
var center = bounds.getCenter();
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: bounds.getCenter(),
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER,
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
fullscreenControl: true,
}});
map.fitBounds(bounds)
}
window.initMap = initMap;
How can I fix the code so that the view (i.e. the bounds) stays the same? I'd really appreciate any help.
The best you can do is to detect when the map changes to fullscreen, and reset the bounds of the map. If the shape of the div changes when it goes to fullscreen, the resulting bounds might be different.
proof of concept fiddle
code snippet:
function initMap() {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(39.051937, -84.721402),
new google.maps.LatLng(39.219590,-84.366564));
var center = bounds.getCenter();
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: bounds.getCenter(),
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER,
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,
fullscreenControl: true,
}});
map.fitBounds(bounds)
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
rectangle = new google.maps.Rectangle({
map: map,
bounds: map.getBounds()
});
});
function setMapBounds() {
map.fitBounds(bounds);
}
new ResizeObserver(setMapBounds).observe(document.getElementById("map"))
}
window.initMap = initMap;
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
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());
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 want to create a map with circle overlay using Google Maps API which is similar to the below site:
[link]https://whypoll.crowdmap.com/
I am able to add circle layer to the Google Map API. Could anyone tell me how to get the count inside the circle. For example here it should print 1 inside the circle.
Thanks in Advance.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Circle Overlay</title>
<style type="text/css">
#map {
width: 1200px;
height: 775px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdTuWJjEUMvQZ6VVPGksE12XNgQgs__Qk&sensor=false&libraries=visualization"></script>
<script type="text/javascript">
/**
* Called on the initial page load.
*/
function init() {
var mapCenter = new google.maps.LatLng(23.30, 80.00);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 5,
'center': mapCenter,
draggable: false,
disableDefaultUI: true,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
// map: map,
position: new google.maps.LatLng(18.7000, 79.1833),
draggable: false
});
var circle = new google.maps.Circle({
map: map,
radius: 100000,
strokeColor: "#FF0000",
fillColor: "#FF0000",
fillOpacity: 0.35,
strokeWeight: 2,
strokeOpacity: 0.8
});
// Since Circle and Marker both extend MVCObject, you can bind them
// together using MVCObject's bindTo() method. Here, we're binding
// the Circle's center to the Marker's position.
// http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
circle.bindTo('center', marker, 'position');
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I copy source code of an example of an overlayed polyline from Google Maps API and it doesn't show anything when I execute that code from an .htm file.
I've been learning about html, javascript and CSS but I can't solve this answer by myself.
Here's the code I have so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Its working you just can't see it. Add the following style to it:
#map_canvas{
height:500px;
}
Fiddle: http://jsfiddle.net/ax6wg/