I have the following code to highlight an area on google maps using the javascript v3 api.
// Maps
$(document).ready(function(){
if($(document).find("map_canvas"))
Maps.init();
});
var Maps = {};
//The map to display
Maps.map;
//List of markers
Maps.markers = new Array();
Maps.markers.previous;
Maps.lines = new Array();
Maps.lines.toStart;
Maps.area;
//init the map
Maps.init = function() {
var mapOptions = {
center: new google.maps.LatLng(-39.483715,176.8942277),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Maps.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(Maps.map, 'click', function(event){Maps.addMarker(event.latLng);});
}
//Add a marker to the maps
Maps.addMarker = function(latLng){
var marker = new google.maps.Marker({
position: latLng,
map: Maps.map
});
Maps.markers.push(latLng);
console.log(Maps.markers.length);
if(Maps.markers.length > 1){
Maps.drawLine([Maps.markers.previous, latLng]);
}
Maps.markers.previous = latLng;
}
Maps.drawLine = function(path){
var Line = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
Line.setMap(Maps.map);
if(Maps.markers.length > 2){
if(Maps.lines.toStart != null)
Maps.lines.toStart.setMap(null);
Maps.lines.toStart = new google.maps.Polyline({
path: [path[path.length - 1], Maps.markers[0]],
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
Maps.lines.toStart.setMap(Maps.map);
if(Maps.area != null)
Maps.area.setMap(null);
Maps.area = new google.maps.Polygon({
paths: Maps.markers,
strokeColor: "#000000",
strokeOpacity: 0,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35
});
Maps.area.setMap(Maps.map);
}
}
It works perfectly as expected an produces a result like so....
But the problem is, is that I need to add markers inside the polygon for obvious reasons. When I click on the polygon expecting a marker to be added the polygon seems to be getting the clicks and not the maps. Is there anyway to get around this? Or make it so only the map receives the clicks?
There is a clickable property in the polygon options. Set that to false and the polygon will ignore clicks and the event will fall through to the map.
Polygon Options
Related
I've seen this tool which let you draw a line on gmaps and it generates the js code for you
So the JS is:
var myCoordinates = [
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
What I would like to do is to start the line from a pin I receive and not a pin I set when I click as per that tool and then I would to draw a infobox at the end of that line (so not where it starts form the pin).
What I am aiming for is to draw a line form a starting point and have an infobox such as per this image below, see the lines on the map
Therefore I can pass the coords here:
new google.maps.LatLng(48.955410,10.034749),
new google.maps.LatLng(59.648652,29.898030)
But how would I target the end of the line and place text there?
With this answer I can define a start and end, but how to draw a box at the end point?
I think you can do it using a marker at the end point of the line, then attaching, for example an infoWindow, at the end and finally hiding the marker.
function initMap() {
var coordinates = {
lat: 40.785845,
lng: -74.020496
};
var coordinates2 = {
lat: 40.805845,
lng: -74.130496
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: coordinates,
scrollwheel: false
});
var marker = new google.maps.Marker({
position: coordinates,
map: map
});
var infoMarker = new google.maps.Marker({
position: coordinates2,
map: map
});
var infowWindow = new google.maps.InfoWindow();
var line = new google.maps.Polyline({
path: [
marker.position,
infoMarker.position
],
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
});
line.setMap(map);
infowWindow.setContent("<b>Hello world!</b>");
infowWindow.open(map, infoMarker);
infoMarker.setVisible(false);
}
google.maps.event.addDomListener(window, "load", initMap);
Check it working on this jsfiddle
i'm creating a Marker layer on my Google Map, and then adding pins. These get added to this layer. I want to add a hover effect which is basically a circle behind the pin.
I was going to just use CSS, however I can't add a before or after to the image, so I need to get the parent element and add it to this. However the Google Maps API doesn't give you access to the Pin element.
var markerLayer = new google.maps.OverlayView();
markerLayer.draw = function () {
this.getPanes().markerLayer.id='markerLayer';
};
markerLayer.setMap(_.map);
// Create pin and store it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat, location.lng),
icon: marker,
title: location.name,
optimized: false
});
_.markers.push(marker);
Below is a screenshot of what the marker object contains, and as you can see there is no reference to the HTMLElement.
My only though was to search the #markerLayer div for images and storing them, assuming that these will appear in the same order as they are added to the _.markers property.
Or would a better way be to create a Circle using the API and putting it in the same position as the pin?
I used the Google Maps Circle to create a circle shape, when hovering to markers.
here is the link to doc:
(https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
Check this addMarker function
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function(){
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
I made a simple app, that will add markers by clicking on the map.
Check this working example: http://jsbin.com/nukecog/2/edit?html,js,output
var map;
var markers = [];
var circles = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {
lat: 0,
lng: 0
}
});
map.addListener('click', function(e) {
addMarker(e.latLng);
});
}
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function() {
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap">
</script>
</body>
</html>
I'm working on an application centered around Google Maps and for one of the features the user will input a series of clicks in order to create a polygon. I would like to do something with the information after the clicks but I don't know how to accomplish this without setTimeout() which wouldn't work due to the variable amount of time it could take the users to create the polygon.
Currently my code is structured as such (with help from one of the answers on the question Draw polygon using mouse on google maps.
let polygons = [];
$('.set-polygon').click(function () {
let isClosed = false;
let poly = new google.maps.Polyline({
map: map,
path: [],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
google.maps.event.addListener(map, 'click', function (e) {
if (isClosed) {
return;
}
let markerIndex = poly.getPath().length;
let isFirstMarker = markerIndex === 0;
let marker = new google.maps.Marker({
map: map,
position: e.latLng,
draggable: true
});
if (isFirstMarker) {
google.maps.event.addListener(marker, 'click', function () {
if (isClosed) {
return;
}
let path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({
map: map,
path: path,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
isClosed = true;
});
}
google.maps.event.addListener(marker, 'drag', function (e) {
poly.getPath().setAt(markerIndex, e.latLng);
});
poly.getPath().push(e.latLng);
let params = {
name: "Polygon1",
poly: poly
};
polygons.push(params);
console.log(polygons);
});
});
var xml = data.responseXML;
var circles = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("location");
var scans = markers[i].getAttribute("scans");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("long")));
var html = name;
var marker = new google.maps.Marker({
center: center,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
radius:1000
});
bindInfoWindow(marker, map, infoWindow, html);
}
Trying to add some data to circle markers.
The circles are already markers for specific locations, but I want to make them vary in size depending on a count that corresponds to that location. I cannot seem to find any code to make markers of variable size, since each marker is most likely going to have a unique number of contacts. Any ideas?
Here's the code I have now for markers. I know its not right, since it's not producing what I want.
https://developers.google.com/maps/documentation/javascript/examples/circle-simple <---This is the effect that I am looking for, but I don't understand how to get the values for size to change based on the data entered in the table.
You can set the marker radius to an integer returned by a function. Or it can be an expression.
Here is a JsFiddle with a working example where the count attribute in the XML is set by an expression.
function initMap() {
var myLatLng = new google.maps.LatLng(47.6685771, -122.2553681),
myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map'), myOptions);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; ++i) {
var marker = markers[i];
var name = marker.getAttribute("location");
var point = new google.maps.LatLng(
parseFloat(marker.getAttribute("lat")),
parseFloat(marker.getAttribute("long")));
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: point,
radius: marker.getAttribute("count") * 75
});
}
}
https://jsfiddle.net/plbogen/ecj8o4uL
When creating a polygon using the Google Maps API v3, how can I prevent the polygon from snapping to other 'maps'?
So instead of:
I would like to make the polygon close like this:
The issue occurs when the difference between the longitudes of 2 consecutive points in the path is >=180
the longitudes of the first 2 points are -97 and 93, so that's the problem in this case(difference is 190)
The only thing I may suggest so far is to split this portion of the path:
new google.maps.LatLng(81, -97),
//additional point
new google.maps.LatLng(80.5, -12),
new google.maps.LatLng(80, 93),
new google.maps.LatLng(56, 78),
new google.maps.LatLng(60, -94)
Demo: http://jsfiddle.net/doktormolle/39CtV/
Once I also Needed it , and thankfully Devs had provided there Research ,so i'm sharing With you
//Taking Example of Bermuda Triangle
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Define the LatLng coordinates for the polygon's path.
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),
new google.maps.LatLng(25.774252, -80.190262)
];
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
For More Reference
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple