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>
Related
As it seems to me, google made some changes to the way their google maps API displays Polylines. Up until last time I checked (3 months ago) Polylines would always be visible at all zoom-levels. When fully zoomed out, the polyline would just be a small dot on he map.
Now, using the same code (basically just the example code offered by google) when I zoom out, the polyline will disappear. This only happens, in case the waypoints of the polyline a very close together.
Example: A Polyline confined to some streets in a small town will not be visible, when zoom out completly. A Polyline which connects to points with a distance of 1000 miles will always be visible.
How can I get the short Polyline to be displayed at all zoom-levels, even if it will just be a small dot?
Example here:
https://plnkr.co/edit/v7FksNUxlpm1f6ag0iQs?p=preview
just zoom out, at some point the polyline will disappear, which I do not want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: 37.772, lng: -122.214},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 37.771, lng: -122.215},
{lat: 37.770, lng: -122.216},
{lat: 37.760, lng: -122.218}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 40
});
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
Call zoomIn or zoomOut on another thread loop. (ex. setTimeout(event)
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.
I'm creating a map in Google Maps that I want to have only one marker. When the user clicks on the map for the first time, a marker would be created (with a circle around it). When the user clicks again, the old marker (and circle) is shifted to the new location.
So basically, this would be done by either moving the marker and circle, or by deleting them and creating a new marker and circle.
At the moment I'm trying to use the latter method, but unfortunately it's not working. Could anyone help?
<script>
//Initial variables (map and the markers array, which we're going to try to get rid of)
var map;
var markersArray = [];
//and GO!
function initialize()
{
//need to correct our starting location - over UK would be nice
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions =
{
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
//listen out for clicks and, when clicked, add a marker
google.maps.event.addListener(map, 'click', function(event)
{
addMarker(event.latLng);
});
}
// Add a marker to the map and push to the array.
function addMarker(location)
{
markersArray = [];
setAllMap(null);
var marker = new google.maps.Marker(
{
position: location,
map: map,
draggable: true
});
//create a circle
var circle = new google.maps.Circle(
{
map: map,
radius: 3000
});
//bind the circle to the marker we've also just created
circle.bindTo('center', marker, 'position');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
If you only want one marker at a time you do not need an array to store markers. You have to make sure you clear the map property of the marker and the circle using the setMap method and passing null. The circle is wrong, you do not have all the options you need and there is no bindTo method. Here is the circle documentation.
I saw that you set the marker's draggable propery to true so you also need to add a dragend event on the marker to relocate the circle to the markers new position using the setCenter method on the circle.
here is a complete example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps</title>
<style>
#map_canvas{
height:800px;
width:800px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script>
var marker, myCircle, map;
function initialize() {
var myLatlng = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(event){
addMarker(event.latLng);
});
}
function addMarker(latLng){
//clear the previous marker and circle.
if(marker != null){
marker.setMap(null);
myCircle.setMap(null);
}
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable:true
});
//circle options.
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: latLng,
radius: 3000
};
//create circle
myCircle = new google.maps.Circle(circleOptions);
//when marker has completed the drag event
//recenter the circle on the marker.
google.maps.event.addListener(marker, 'dragend', function(){
myCircle.setCenter(this.position);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
I'm creating an instructional document that will require an overlay element (in this example, a red square) to be used on multiple google maps on the same page.
I am unable to use the setMap() function successfully - it seems to be applied to the last map on the page.
I haven't been able to loop the contents successfully either (not shown in this code) - my variable naming syntax is most likely wrong
I have many other overlays to use as well, but kept this example code simple for now.
Here is my (non-working) code thus far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.S.G.</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var myOptions =
{
zoom: 17,
center: new google.maps.LatLng(38.5000000,-105.0000000),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map1 = new google.maps.Map(document.getElementById("map1"),myOptions);
var map2 = new google.maps.Map(document.getElementById("map2"),myOptions);
// Set Border Coords
var BorderCoords =
[
new google.maps.LatLng(38.5013726888,-104.99825068),
new google.maps.LatLng(38.4986273112,-104.99825068),
new google.maps.LatLng(38.4986273112,-105.00174932),
new google.maps.LatLng(38.5013726888,-105.00174932)
];
// Define Border
var Border = new google.maps.Polygon
({
paths: BorderCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
Border.setMap(map1);
Border.setMap(map2);
}
</script>
</head>
<body onload="initialize()">
<div id="map1" style="width:920px;height:400px;"></div>
<div id="map2" style="width:920px;height:400px;"></div>
</body>
</html>
When you call setMap it replaces the "map" property of the polygon with a new value, and discards the old value. In this case you first set map to be map1, then replace that with map2, so the expected behaviour is that the polygon is only shown on map2.
The following code should do what you require:
// Define Border
var Border = new google.maps.Polygon
({
paths: BorderCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
var Border2 = new google.maps.Polygon
({
paths: BorderCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2
});
Border.setMap(map1);
Border2.setMap(map2);
Using the Google Maps API v3: How do I change the mouse cursor when I mouseover on a particular area?
Yes, this is possible by setting draggableCursor in MapOptions, as in the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps v3 Change Cursor Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 350px"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(-34.3, 150.6)
});
var ne = new google.maps.LatLng(-34.00, 150.00);
var nw = new google.maps.LatLng(-34.00, 150.50);
var sw = new google.maps.LatLng(-35.00, 150.50);
var se = new google.maps.LatLng(-35.00, 150.00);
var boundingBox = new google.maps.Polyline({
path: [ne, nw, sw, se, ne],
strokeColor: '#FF0000'
});
boundingBox.setMap(map);
google.maps.event.addListener(map, 'mousemove', function(event) {
if ((event.latLng.lat() > se.lat()) && (event.latLng.lat() < ne.lat()) &&
(event.latLng.lng() > ne.lng()) && (event.latLng.lng() < sw.lng())) {
map.setOptions({ draggableCursor: 'crosshair' });
}
else {
map.setOptions({ draggableCursor: 'url(http://maps.google.com/mapfiles/openhand.cur), move' });
}
});
</script>
</body>
</html>
If you run the above example, the cursor would change to a cross hair once the mouse is moved inside the red rectangle.
Other answers advising to to put 'mousemove' listeners on the whole map object will work but are wrong. This is 'heavy handed' and a bad idea as listeners like these can add up in a real application and when combined with other things happening on your map, can cause serious performance problems and possibly unforeseen race conditions!
The BEST way to do this is to use the google.maps.Polygon class. This allows you to pass a series of LatLng objects to create a Polygon. This polygon is rendered on the map and has a default mouseover attribute of 'pointer', you can add a 'mouseover' listener to the object returned from the new google.maps.Polygon class call.
The source below is from this example
http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Then I can add the listener like this
google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8