Develop Reference

Add a circle to a specific marker added via loop from an array

I have loaded a map and few markers via Google Map Js API. My code so far looks as below:
var mapCenter = {lat: 10.0268196, lng: 76.3080968};
var locations = [
[ 'Malabar Gold', 10.02695298, 76.30807266],
[ 'Sky Jewellery', 10.0268196, 76.3080968],
[ 'Gilli', 10.02676809, 76.3081786],
[ 'Mark & Spencer', 10.02667433, 76.30830199],
[ 'Dar Optics', 10.02626758, 76.30800158]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 28,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow()
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Then on some event, I want to highlight a marker (the icon that's added from the array) with a circle around it, as shown in code below. But in the below code the circle always comes around the last marker(last cordinate in the array in the loop) added to the map. I need a way to select whichever marker I want, by using the i(index) value or something of the array, for example the second marker or the third marker and add a circle around it programmatically instead of just the last one.
var circle = new google.maps.Circle({
map: map,
radius: 2.5, // 10 miles in metres
fillColor: '#4A90E2',
strokeColor: '#2577D6',
strokeOpacity: 0.9,
strokeWeight: 1,
});
circle.bindTo('center', marker[1], 'position');

store your markers in an array so you can access them after creation
add the circle to the specified google.maps.Marker in that array
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
To add the circle on a (for example) click event later:
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
var circle = new google.maps.Circle({
map: map,
radius: 2.5, // 10 miles in metres
fillColor: '#4A90E2',
strokeColor: '#2577D6',
strokeOpacity: 0.9,
strokeWeight: 1,
});
circle.bindTo('center', markers[document.getElementById('markerNum').value], 'position');
})
proof of concept fiddle
code snippet:
var geocoder;
var map;
var markers = [];
function initialize() {
var mapCenter = {
lat: 10.0268196,
lng: 76.3080968
};
var bounds = new google.maps.LatLngBounds();
var locations = [
['Malabar Gold', 10.02695298, 76.30807266],
['Sky Jewellery', 10.0268196, 76.3080968],
['Gilli', 10.02676809, 76.3081786],
['Mark & Spencer', 10.02667433, 76.30830199],
['Dar Optics', 10.02626758, 76.30800158]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 28,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow()
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
map.fitBounds(bounds);
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
var circle = new google.maps.Circle({
map: map,
radius: 2.5, // 10 miles in metres
fillColor: '#4A90E2',
strokeColor: '#2577D6',
strokeOpacity: 0.9,
strokeWeight: 1,
});
circle.bindTo('center', markers[document.getElementById('markerNum').value], 'position');
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="markerNum" value="1" />
<input id="btn" value="click" type="button" />
<div id="map"></div>

You are overwriting your marker variable in each iteration of the for cycle, so instead of
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
try
marker.push(new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
}));
google.maps.event.addListener(marker[i], 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker[i], i));

Polyline Google Maps

Can't figure out where my code is going wrong. Want markers on the map, when clicked on it indicates the City name. Want a line connecting the markers. Any ideas?
var line = new google.maps.Polyline({
path: [
new google.maps.LatLng(37.4419, -122.1419),
new google.maps.LatLng(37.4519, -122.1519)
],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
map: map
});
var locations = [
['Dalian', 38.914003, 121.614682]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(45.141789, 124.825118),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

you are defining the polyline before you define the map. The map property of the polyline needs to be a valid map object, it is easier to do that if you define it after the map.
your polyline is in Palo Alto CA, the map is centered over China.
you only have one marker in your question, you can't make a polyline with one point.
fiddle
code snippet:
function initialize() {
var locations = [
['Dalian', 38.914003, 121.614682]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(45.141789, 124.825118),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var line = new google.maps.Polyline({
path: [
new google.maps.LatLng(37.4419, -122.1419),
new google.maps.LatLng(37.4519, -122.1519)
],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
map: map
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google Maps Circle

I am trying to load data from an API then display it using circles. I am able to create markers with the data points but not circles. I am following this example here from Google's documentation.
What I expect to happen is in the for loop, using center: new google.maps.LatLng(well.location.latitude, well.location.longitude) would suffice to create the center points. However, that doesn't seem to work. Everything else is the same as the example (will modify later).
I expected this to work because earlier in the example, I am able to use $.each to display markers using field.location.latitude, field.location.longitude which is essentially the same thing (or so I think).
Can I not make circles within the $.getJSON function like I can with markers? Is it happening "out of sync"? I'm still trying to learn how to process async events.
Fiddle here.
HTML:
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
CSS:
#map {
border: 1px solid black;
margin: 0 auto;
width: 500px;
height: 300px;
}
JavaScript
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
//console.log(markers);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
for (var i = 0; i < data.length; i++) {
//console.log(data[i].location.latitude + ", " + data[i].location.longitude);
};
$.each(data, function(i, field) {
addMarker(field.location.latitude, field.location.longitude);
});
for (var well in data) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude,
well.location.longitude),
radius: 100000
});
};
});
});

data is an array, either iterate through it, or use $.each (or .forEach).
for (var i=0; i < data.length; i++) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
radius: 10000
});
};
or (like you did with the markers):
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
code snippet:
var map;
var mapProp;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
});
});
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#map {
border: 1px solid black;
margin: 0 auto;
width: 99%;
height: 99%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Your code for the markers was correct, but there are some items of your data that do not have a location property, that's why your code is not fully working.
If you want to add Circles instead of markers, you can use your $.each loop and simply check the location block before adding a point.
Here is a working example: http://jsfiddle.net/xb7eh58p/ (sorry, didn't use yours because I had not seen your link)
In details, here is your code that I adjusted:
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
//for (var i = 0; i < data.length; i++) {
// console.log(data[i].location.latitude + ", " + data[i].location.longitude);
//};
$.each(data, function(i, field) {
if(field.location) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(field.location.latitude,
field.location.longitude),
radius: 100000
});
} else {
console.log("Missing location for this data item");
}
});
});
});
As you can see, you just need to ckeck if(field.location)

Google Maps Engine API - KML Layers Obstructing New Markers Event

I am currently building out a small widget that allows someone to see a kml heat map of the united states population density then select an area on that map and drop a market on to that location. The user then enters a number and that creates a mile radius to show the user how much area they cover.
My problem is that I have 63 .kml files for just one state in the US. I know I can remove the xml <name> and <description> to prevent the name from popping up when clicked, but I can't see that being practical with that many .kml files.
Is there a programmatic solution or API solution to prevent just the kml layers from being clickable?
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
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: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml'
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
Discretionary note: Google API does not work well with Stack Overflow's code snippet's widget.

set the KmlLayer clickable option to false
clickable boolean If true, the layer receives mouse events. Default value is true.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
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: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml',
clickable: false
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Complex Polylines with arrow google map api v3

I wanted to create the arrow directed polyline using google map. I'm able to connect through line. But i wanted to draw line in arrow ended.
My code is
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 5
//center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.clearOverlays();
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
icons: [{
icon: lineSymbol,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
offset: '100%'
}],
strokeWeight: 3
};
lineCoordinates= new google.maps.Polyline(polyOptions);
lineCoordinates.setMap(map);
}
function placeMarker(mapLoc,address,infoDlgString){
map.setCenter(mapLoc);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
title: address,
position: mapLoc
});
var infowindow = new google.maps.InfoWindow({
content:infoDlgString
});
infowindow.open(map,marker);
}
function getAddressDetail(address2,infoDlgString){
geocoder.geocode( { 'address': address2}, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
map.setCenter(results2[0].geometry.location);
placeMarker(results2[0].geometry.location,address2,infoDlgString);
var path = lineCoordinates.getPath();
path.push(results2[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status2);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

You haven't specified a path for your polyline to follow. So Google doesn't know what to plot. Once you add a path of multiple latlngs in your polyOptions variable, the line should appear with the correct arrow head end. This works for me:
<!DOCTYPE html>
<html>
<head>
<title>Polyline with arrows</title>
<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 { width:100%; height:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(54.57723, -2.79748);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeColor: '#FF0000',
strokeOpacity: 1.0
};
var polyline = new google.maps.Polyline({
path: [latlng, new google.maps.LatLng(54.60039,-3.13632), new google.maps.LatLng(54.36897,-3.07561)],
strokeColor: "#000000",
strokeOpacity: 0.5,
strokeWeight: 4,
map: map,
icons: [{
icon: lineSymbol,
offset: '100%'
}]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Also note that there is no strokeColor or strokeOpacity properties in the IconSequence object. These are on the Symbol object instead.