Google Maps API circle markers, variable size - javascript

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

Related

How to draw a line and a box on gmaps?

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

Drawing a POLYGON from initial position

My problem is: I need to draw with mode POLYGON with a initial point, like a marker or another element. For example - JSFiddle Example
With marker:
var initialPosition = new google.maps.Marker({
position: {
lat: -22.397542,
lng: -46.884630
}
});
This position is given without any user interaction. How can I do that?
In my example, how can I draw a polygon starting from marker without click it, making marker position my first polygon point?
You could do the following: use addListenerOnce to detect a click on the map (only once). This will allow to create a Polygon that goes from your marker position, to where the user clicked, and back to the marker position.
By setting the editable property to true, you can then move each Polygon point separately, and add segments by dragging the existing segment(s) middle point(s).
Here is a working example:
function initialize() {
var myLatLng = new google.maps.LatLng(46.2, 6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListenerOnce(map, 'click', function(e) {
var origin = marker.getPosition();
var coords = [
origin,
e.latLng,
origin,
];
var poly = new google.maps.Polygon({
map: map,
paths: coords,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

Markers on multiple coordinates on Google Map in JavaScript

I have two sets of points coordinates that I need to connect on google map, like this, just much larger:
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
The first coordinate from "start" needs to be connected to the first coord from "end", and so on, until the end. Got that, but now I need to make "start" and "end" points more recognizable, put some kind of dots in a different color on them. What I have:
var geocoder;
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
var paths = [];
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
Any kind of help is welcomed.
The simplest thing you can just create markers for start and end points. Like the following code
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
It will give you something like
Code snippet
var map;
function initMap() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
var paths = [];
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>

How to convert a circles,two rectangles into Polygons on Google maps and make it appear on the same map

Here is my code
I want a circles and a rectangle to appear on the same map (Map1,Map2.html)..How to do it?
Map1.html
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(45.637839, -73.648316),
population: 270
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: 40 * 1000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
google.maps.event.addListener(map,'click',function(event) {
alert("Shan");
var map1=event.latLng.lat() + ', ' + event.latLng.lng();
document.getElementById("latlong").innerHTML=map1;
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Map2.html
<script>
// This example adds a red rectangle to a map.
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(45.16267407976457,-74.6630859375),
new google.maps.LatLng(46.1665167159516,-72.6580810546875))
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Just combine it all:
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(45.637839, -73.648316),
population: 270
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: 40 * 1000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(45.16267407976457, -74.6630859375),
new google.maps.LatLng(46.1665167159516, -72.6580810546875))
});
google.maps.event.addListener(map, 'click', function (event) {
alert("Shan");
var map1 = event.latLng.lat() + ', ' + event.latLng.lng();
document.getElementById("latlong").innerHTML = map1;
})
}
google.maps.event.addDomListener(window, 'load', initialize);

Disable click on polygon

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

Categories

Resources