add infoWindow to map marker using json - javascript
I have a simple script that adds a markers on a map, data have been taken from json. I want to add a basic infoWindow to all markers, so that when you click on it, it says "Cartier".
Could you tell me what i'm doing wrong with InfoWindow code?
The code is below.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 2,
center: {lat: 37.275, lng: 22.549},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
script.src = 'http://pastebin.com/raw.php?i=7X956uB3';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var jstores = feature.getProperty('jstores');
return {
icon: getCircle(jstores),
title: (jstores)
};
});
var contentString = '<div id="content">Cartier</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function getCircle(jstores) {
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .2,
scale: Math.sqrt(jstores) * 2,
strokeColor: 'white',
strokeWeight: .5
};
return circle;
}
function jewellery_stores(results) {
map.data.addGeoJson(results);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Sample JSON:
jewellery_stores({ "type": "FeatureCollection","features": [
{"type": "Feature","geometry": {"type": "Point", "coordinates": [139.730407, 35.70883]},"properties": {"jstores": 106 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [37.615556, 55.752222]},"properties": {"jstores": 94 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [2.3524282, 48.8564528]},"properties": {"jstores": 89 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.277067, 25.176594]},"properties": {"jstores": 66 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [-0.1276597, 51.5072759]},"properties": {"jstores": 64 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [114.169551, 22.285261]},"properties": {"jstores": 63 }}]
Thank you in advance,
Andrey
You are using the Google Maps Javascript API v3 Data Layer
That supports click listeners which allow you to open infowindows containing properties included in the JSON.
map.data.addListener('click', function (e) {
infowindow.setPosition(e.latLng);
infowindow.setContent("hello world<br>jstores="+e.feature.getProperty("jstores")+"<br>"+e.latLng.toUrlValue(6));
infowindow.open(map);
});
Working code snippet:
var map;
var infowindow = new google.maps.InfoWindow({});
function initialize() {
var mapOptions = {
zoom: 2,
center: {
lat: 37.275,
lng: 22.549
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
script.src = 'https://pastebin.com/raw.php?i=7X956uB3';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var jstores = feature.getProperty('jstores');
return {
icon: getCircle(jstores),
title: (jstores)
};
});
}
function getCircle(jstores) {
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: 0.2,
scale: Math.sqrt(jstores) * 2,
strokeColor: 'white',
strokeWeight: 0.5
};
return circle;
}
function jewellery_stores(results) {
map.data.addGeoJson(results);
map.data.addListener('click', function(e) {
infowindow.setPosition(e.latLng);
infowindow.setContent("hello world<br>jstores=" + e.feature.getProperty("jstores") + "<br>" + e.latLng.toUrlValue(6));
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
Related
Google Maps API: getFeatureById for feature collection not working
I try to change the style of a specific feature of a feature collection data overlay. This is a snippet of my json:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {
"name": "1 CBD - Bankenviertel",
"color": "transparent",
"isHovered": false,
"isActive": false
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
8.67279430349,
50.1143807311
],
[
8.67280054398,
50.1143975981
]
]
]
}
}
and this is the relevant snippet from my map.js
map.data.loadGeoJson('some.json');
console.log(map.data.getFeatureById(1));
And I am always getting "undefined" in the console.
What am I doing wrong here?
Thanks,
Robert
You need to call map.data.getFeatureById(1) inside the callback function (so it doesn't execute before the GeoJson has loaded).
from the documentation:
loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array<Data.Feature>))
Return Value: None
Loads GeoJS
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 4,
center: {
lat: -28,
lng: 137
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// map.data.addGeoJson(geoJson);
map.data.loadGeoJson(
'https://api.myjson.com/bins/1teyu', {},
function(features) {
console.log(map.data.getFeatureById(1));
console.log(map.data.getFeatureById(1).getProperty("letter"));
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
Why Google Maps Polyline strokeColor always black?
I have already draw some trajectories in Google Maps Api. But I want to give a different color to each trajectory. The problem is that the color always is black even when strokeColor is not '#0000'. Any ideas about what is happening? Here is my code:
<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>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -12, lng: -77},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.loadGeoJson('aristas.geojson');
var aristasPath = new google.maps.Polyline({
path: aristas,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
aristasPath.setMap(map);
}
</script>
You are adding your polyline to the data layer with .loadGeoJson, that needs to be styled using the data layer styling methods, not as a normal google.maps.Polyline
// Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: -12,
lng: -77
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.addGeoJson(platesJson);
// Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
}
google.maps.event.addDomListener(window, 'load', initMap);
var platesJson = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"strnum": 420,
"platecode": 201,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "PERU-CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-81.8796, -5.0707],
[-81.876, -5.1257],
[-81.8735, -5.2358],
[-81.8737, -5.2473],
[-81.8806, -5.3778],
[-81.871, -5.4765],
[-81.8638, -5.5843],
[-81.8346, -5.736],
[-81.8182, -5.8416],
[-81.7953, -5.9634],
[-81.7765, -6.0598],
[-81.7624, -6.1654],
[-81.7437, -6.2687],
[-81.7293, -6.3536],
[-81.7064, -6.4775],
[-81.6682, -6.6405],
[-81.6263, -6.7213],
[-81.5982, -6.8087],
[-81.5294, -6.9219],
[-81.4834, -7.0347],
[-81.4483, -7.1152],
[-81.3914, -7.2533],
[-81.3679, -7.3427],
[-81.3469, -7.4436],
[-81.3323, -7.5191],
[-81.2998, -7.6201],
[-81.2756, -7.673],
[-81.2494, -7.7373],
[-81.2318, -7.7764],
[-81.2255, -7.8039],
[-81.1969, -7.866],
[-81.1661, -7.9327],
[-81.1379, -8.0129],
[-81.1037, -8.1434],
[-81.0577, -8.2559],
[-81.0115, -8.3547],
[-80.9587, -8.4649],
[-80.9126, -8.5682],
[-80.8997, -8.6139],
[-80.8439, -8.6855],
[-80.8132, -8.7611],
[-80.7695, -8.8688],
[-80.7301, -8.965],
[-80.6681, -9.0752],
[-80.6064, -9.1967],
[-80.5598, -9.2748],
[-80.5088, -9.3598],
[-80.4557, -9.4584],
[-80.4184, -9.5408],
[-80.3541, -9.6486],
[-80.2921, -9.7608],
[-80.2479, -9.8433],
[-80.201, -9.9053],
[-80.126, -10.0518],
[-80.0703, -10.1298],
[-80.0196, -10.2304],
[-79.9303, -10.3452],
[-79.8612, -10.4438],
[-79.817, -10.5261],
[-79.7463, -10.6608],
[-79.6729, -10.7684],
[-79.6218, -10.8507],
[-79.5865, -10.9169],
[-79.551, -10.9785],
[-79.5266, -11.0151],
[-79.4953, -11.0541],
[-79.4757, -11.1086],
[-79.4607, -11.1608],
[-79.4388, -11.2131],
[-79.3921, -11.2839],
[-79.3566, -11.341],
[-79.2965, -11.4323],
[-79.2206, -11.5306],
[-79.1829, -11.5899],
[-79.1426, -11.6403],
[-79.1004, -11.7064],
[-79.0628, -11.7724],
[-79.0273, -11.8293],
[-78.9893, -11.8773],
[-78.9271, -11.9752],
[-78.8806, -12.0594],
[-78.7889, -12.169],
[-78.7083, -12.2582],
[-78.6413, -12.3425],
[-78.5833, -12.42],
[-78.5209, -12.5088],
[-78.4454, -12.6269],
[-78.4124, -12.6948],
[-78.377, -12.7606],
[-78.3217, -12.858],
[-78.2665, -12.9622],
[-78.2089, -13.0619],
[-78.1528, -13.1189],
[-78.1058, -13.1713],
[-78.0453, -13.2373],
[-77.983, -13.3325],
[-77.952, -13.3868],
[-77.89, -13.4908],
[-77.7986, -13.62],
[-77.738, -13.677],
[-77.6595, -13.7566],
[-77.5585, -13.8589],
[-77.5113, -13.9045],
[-77.4488, -13.9837],
[-77.3997, -14.0471],
[-77.2988, -14.1516],
[-77.2249, -14.2354],
[-77.1801, -14.2831],
[-77.0858, -14.3761],
[-76.9742, -14.5207],
[-76.9026, -14.6066],
[-76.8151, -14.695],
[-76.7568, -14.7539],
[-76.6966, -14.8328],
[-76.6426, -14.8805],
[-76.6043, -14.9123],
[-76.5272, -14.9426],
[-76.5002, -14.9697],
[-76.4512, -15.0372],
[-76.3958, -15.1271],
[-76.3718, -15.1919],
[-76.2867, -15.2844],
[-76.1922, -15.366],
[-76.0885, -15.4455],
[-75.9892, -15.5137],
[-75.8835, -15.6065],
[-75.8343, -15.6605],
[-75.7868, -15.688],
[-75.7211, -15.7223],
[-75.6718, -15.7764],
[-75.6115, -15.8527],
[-75.5537, -15.9378],
[-75.4955, -16.003],
[-75.4324, -16.0527],
[-75.3538, -16.1271],
[-75.2975, -16.1723],
[-75.2206, -16.2134],
[-75.173, -16.2363],
[-75.0938, -16.2819],
[-75.0286, -16.3404],
[-74.959, -16.4035],
[-74.8848, -16.471],
[-74.8082, -16.5297],
[-74.788, -16.5499],
[-74.6751, -16.6268],
[-74.6052, -16.6766],
[-74.4517, -16.7784],
[-74.3209, -16.8732],
[-74.1941, -16.9415],
[-74.0948, -17.0092],
[-74.0022, -17.0658],
[-73.8987, -17.1534],
[-73.7904, -17.23],
[-73.6974, -17.2712],
[-73.5977, -17.3169],
[-73.4981, -17.3713],
[-73.4422, -17.436],
[-73.3863, -17.5006],
[-73.3189, -17.5654],
[-73.2204, -17.6746],
[-73.1355, -17.7746],
[-72.9596, -17.9025],
[-72.8495, -18.0051],
[-72.7776, -18.072],
[-72.6854, -18.1523],
[-72.6089, -18.2127],
[-72.5661, -18.2484],
[-72.4901, -18.3392],
[-72.4277, -18.4211],
[-72.352, -18.5271],
[-72.2618, -18.5963],
[-72.1823, -18.6217],
[-72.1168, -18.6642],
[-72.0611, -18.7371],
[-72.0148, -18.825],
[-71.8849, -18.9687],
[-71.8676, -19.0169],
[-71.8187, -19.0895],
[-71.7944, -19.1355],
[-71.7453, -19.1972],
[-71.687, -19.259],
[-71.6264, -19.3144],
[-71.5974, -19.3539],
[-71.5595, -19.4023],
[-71.5149, -19.4595],
[-71.4862, -19.512],
[-71.4531, -19.5755],
[-71.4317, -19.6538],
[-71.3991, -19.741],
[-71.3665, -19.826],
[-71.3143, -19.9653],
[-71.2905, -20.0327],
[-71.2605, -20.1369],
[-71.2512, -20.2472],
[-71.2303, -20.3489],
[-71.2043, -20.4226],
[-71.1895, -20.4854],
[-71.1863, -20.5565],
[-71.186, -20.7739],
[-71.1786, -20.8643],
[-71.1853, -20.9737],
[-71.1805, -21.079],
[-71.1729, -21.1563],
[-71.1613, -21.268],
[-71.1497, -21.3753],
[-71.1377, -21.4612],
[-71.1416, -21.5445],
[-71.1457, -21.6364],
[-71.1538, -21.7004],
[-71.1544, -21.7303],
[-71.1794, -21.843],
[-71.1858, -21.9326],
[-71.1875, -22.02],
[-71.1892, -22.1094],
[-71.1845, -22.216],
[-71.1851, -22.3607],
[-71.181, -22.5031],
[-71.1939, -22.5794],
[-71.2321, -22.7739],
[-71.2546, -22.871],
[-71.2778, -23.004],
[-71.2961, -23.1222],
[-71.2834, -23.2873],
[-71.2969, -23.3926],
[-71.2989, -23.4917],
[-71.2851, -23.6057],
[-71.3027, -23.6855],
[-71.3118, -23.7969],
[-71.3184, -23.8977],
[-71.328, -24.0383],
[-71.3413, -24.1304],
[-71.3664, -24.2412],
[-71.3866, -24.3372],
[-71.3787, -24.5132],
[-71.3796, -24.6721],
[-71.379, -24.7577],
[-71.3746, -24.8809],
[-71.3893, -25.0432],
[-71.4122, -25.1552],
[-71.4473, -25.3085],
[-71.4826, -25.4741],
[-71.4918, -25.588],
[-71.4655, -25.6465],
[-71.4655, -25.6465],
[-71.4651, -25.7397],
[-71.4719, -25.8493],
[-71.4735, -25.9279],
[-71.4806, -26.0538],
[-71.4965, -26.1609],
[-71.5245, -26.3006],
[-71.5664, -26.4482],
[-71.5889, -26.5445],
[-71.6372, -26.6732],
[-71.6522, -26.8474],
[-71.6607, -26.9272],
[-71.6882, -27.0415],
[-71.7346, -27.188],
[-71.7597, -27.2939],
[-71.7892, -27.3955],
[-71.8165, -27.5011],
[-71.8336, -27.5559],
[-71.8689, -27.6001],
[-71.8882, -27.6527],
[-71.9121, -27.7012],
[-71.9463, -27.8064],
[-71.9406, -27.8654],
[-71.9393, -27.9142],
[-71.9527, -28.0053]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 444,
"platecode": 291,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 1,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-71.9527, -28.0053],
[-71.9851, -28.1366],
[-72.0072, -28.2112],
[-72.049, -28.3522],
[-72.1035, -28.5534],
[-72.1591, -28.7018],
[-72.1887, -28.8041],
[-72.2016, -28.8763],
[-72.2217, -28.9645],
[-72.2224, -28.9966],
[-72.2242, -29.083],
[-72.2368, -29.139],
[-72.2514, -29.1829],
[-72.2853, -29.2726],
[-72.3071, -29.3284],
[-72.305, -29.4486],
[-72.3238, -29.5823],
[-72.3395, -29.6779],
[-72.3671, -29.7932],
[-72.4251, -29.9397],
[-72.4341, -30.0431],
[-72.4545, -30.1441],
[-72.4674, -30.2134],
[-72.4695, -30.3126],
[-72.4508, -30.4002],
[-72.446, -30.4973],
[-72.4499, -30.5725],
[-72.4656, -30.6671],
[-72.4835, -30.7597],
[-72.4951, -30.872],
[-72.4934, -31.1143],
[-72.5261, -31.2572],
[-72.5313, -31.3926],
[-72.5351, -31.465],
[-72.5439, -31.555],
[-72.55, -31.6234],
[-72.5487, -31.6723],
[-72.5293, -31.7254],
[-72.5256, -31.7684],
[-72.5245, -31.8231],
[-72.5325, -31.8738],
[-72.5518, -31.9242],
[-72.5717, -31.9979],
[-72.5779, -32.0738],
[-72.5789, -32.1205],
[-72.5824, -32.1749],
[-72.5832, -32.2118],
[-72.5811, -32.2196],
[-72.5679, -32.247],
[-72.539, -32.2824],
[-72.5237, -32.3157],
[-72.5313, -32.3486],
[-72.5503, -32.3851],
[-72.5814, -32.4467],
[-72.6154, -32.5373],
[-72.6348, -32.5892],
[-72.6401, -32.6259],
[-72.6602, -32.7068],
[-72.6663, -32.7782],
[-72.6677, -32.8419],
[-72.6664, -32.8882],
[-72.6607, -32.9423],
[-72.6531, -33.0118],
[-72.6538, -33.0426],
[-72.6551, -33.1023],
[-72.6627, -33.1387],
[-72.6772, -33.175],
[-72.6909, -33.2767],
[-72.741, -33.3757],
[-72.7447, -33.4389],
[-72.7695, -33.5267],
[-72.7801, -33.5954],
[-72.7779, -33.5974],
[-72.7787, -33.6337],
[-72.8056, -33.7136],
[-72.844, -33.797],
[-72.8591, -33.8597],
[-72.8884, -33.9432],
[-72.9127, -34.0114],
[-72.953, -34.0774],
[-73.0047, -34.1393],
[-73.0723, -34.1991],
[-73.1331, -34.2609],
[-73.1892, -34.315],
[-73.2542, -34.3615],
[-73.2915, -34.3912],
[-73.3522, -34.449],
[-73.3993, -34.5127],
[-73.4605, -34.5912],
[-73.5054, -34.6567],
[-73.5739, -34.7557],
[-73.6333, -34.8585],
[-73.6578, -34.9297],
[-73.6772, -34.9803],
[-73.704, -35.0532],
[-73.7327, -35.1129],
[-73.7596, -35.1895],
[-73.7817, -35.2586],
[-73.7949, -35.3353],
[-73.7988, -35.4082],
[-73.7928, -35.4476],
[-73.7942, -35.5074],
[-73.8133, -35.5445],
[-73.8284, -35.6078],
[-73.9549, -35.8464],
[-74.0473, -35.9901],
[-74.0809, -36.0583],
[-74.1119, -36.1154],
[-74.1667, -36.2147],
[-74.2074, -36.2937],
[-74.2436, -36.3764],
[-74.2817, -36.4442],
[-74.3294, -36.534],
[-74.3493, -36.6019],
[-74.4045, -36.719],
[-74.4342, -36.816],
[-74.4744, -36.977],
[-74.5134, -37.081],
[-74.5509, -37.2213],
[-74.5626, -37.3344],
[-74.5716, -37.4273],
[-74.5808, -37.5274],
[-74.5841, -37.5711],
[-74.5954, -37.6673],
[-74.6012, -37.7199],
[-74.6033, -37.8106],
[-74.6044, -37.8577],
[-74.6129, -37.9301],
[-74.6214, -38.0023],
[-74.6304, -38.0926],
[-74.6311, -38.1215],
[-74.6372, -38.19],
[-74.6335, -38.228],
[-74.6413, -38.2657],
[-74.6769, -38.3247],
[-74.7377, -38.3796],
[-74.7829, -38.4581],
[-74.8232, -38.5204],
[-74.8643, -38.6149],
[-74.8795, -38.6775],
[-74.8896, -38.7167],
[-74.8837, -38.758],
[-74.878, -38.8082],
[-74.8814, -38.8564]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 445,
"platecode": 292,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-74.8814, -38.8564],
[-74.9212, -38.897],
[-74.9545, -38.9501],
[-74.9628, -39.0142],
[-74.9619, -39.073],
[-74.9672, -39.1033],
[-74.9822, -39.1582],
[-75.0043, -39.222],
[-75.0197, -39.2911],
[-75.0335, -39.3956],
[-75.0417, -39.4523],
[-75.0439, -39.5443],
[-75.0456, -39.6168],
[-75.0474, -39.6893],
[-75.0467, -39.7599],
[-75.0489, -39.8516],
[-75.0503, -39.9114],
[-75.0486, -39.9343],
[-75.0458, -40.0065],
[-75.0037, -40.0086],
[-74.9999, -40.0368],
[-75.003, -40.0614],
[-75.0127, -40.0806],
[-75.0175, -40.0893],
[-75.034, -40.1048],
[-75.0692, -40.1323],
[-75.093, -40.1635],
[-75.1242, -40.2122],
[-75.1412, -40.2435],
[-75.1542, -40.2959],
[-75.165, -40.35],
[-75.1709, -40.3954],
[-75.1819, -40.4565],
[-75.1901, -40.5001],
[-75.1987, -40.5576],
[-75.2067, -40.5958],
[-75.2124, -40.6324],
[-75.2182, -40.6759],
[-75.2195, -40.7177],
[-75.2137, -40.7544],
[-75.2101, -40.7858],
[-75.2017, -40.8103],
[-75.1936, -40.847],
[-75.1924, -40.8835],
[-75.2003, -40.9181],
[-75.2151, -40.9508],
[-75.2485, -40.9954],
[-75.2723, -41.0262],
[-75.2919, -41.0675],
[-75.3087, -41.0949],
[-75.3331, -41.143],
[-75.356, -41.2187]
]
}
}]
};
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Add infowindow and custom icon to Google map using Geojson
I have this simple Google map in a Web2py application.
I would like to apply something like a switch for choosing the feature icon and also setting an infoWindow from json text.
Someone knows how I can do it?
var map;
function initMap() {
map = new google.maps.Map(document.getElementById("events_map"), {
center: {lat: 45.070309, lng: 7.686580999999933},
zoom: 13,
mapTypeControl: false
});
var largeInfowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'idle', function() {
var ne = map.getBounds().getNorthEast();
var north = ne.lat();
var east = ne.lng();
var sw = map.getBounds().getSouthWest();
var south = sw.lat();
var west = sw.lng();
var queryString = '?east=' + east + '&west=' + west + '&south=' + south + '&north=' + north + '&zoom=8'
map.data.loadGeoJson('{{=URL('f_ajax', 'get_locations_g')}}' + queryString);
});
}
json data has a category field that can have 1, 2, 3, or 4 as value.
So with a switch I would like to set the icon in this way:
var icon;
switch (feature.properties.category) {
case '1':
icon = greenIcon;
break;
case '2':
icon = bluIcon;
break;
case '3':
icon = redIcon;
break;
case '4':
icon = blackIcon;
break;
}
But I don't know how.
For the infowindow, can I use this function and how for displaying the json field 'description'?
Thanks.
function populateInfoWindow(marker, infowindow) {
// Check to make sure the infowindow is not already opened on this marker.
if (infowindow.marker != marker) {
infowindow.marker = marker;
infowindow.setContent("<div><a href='" + marker.link + "'>" + marker.title + '</a></div>');
infowindow.open(map, marker);
// Make sure the marker property is cleared if the infowindow is closed.
infowindow.addListener('closeclick', function() {
infowindow.marker = null;
});
}
}
For the icon you have to use the setStyle-function.
A object with the icons should be the easiest approach here
map.data.setStyle(function(feature) {
return {
icon:({1:greenIcon,
2:redIcon,
3:blueIcon,
4:blackIcon})[feature.getProperty('category')]
};
});
The function for the InfoWindow may not be used, because there is no marker available in the click-handler, you have to set the options of the InfoWindow based on the clicked feature
map.data.addListener('click', function(event) {
largeInfowindow.setOptions({
map : map,
position: event.feature.getGeometry().get(),
content : '<strong>'+event.feature.getProperty('description')+'</strong>'
})
});
Demo:
function initMap() {
var greenIcon = 'http://maps.gstatic.com/mapfiles/markers2/icon_green.png',
redIcon = 'http://maps.gstatic.com/mapfiles/markers2/marker.png',
blueIcon = 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
blackIcon = 'http://maps.gstatic.com/mapfiles/markers2/drag_cross_67_16.png',
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat:52.41, lng: 9.74}
}),
largeInfowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-30)});
map.data.setStyle(function(feature) {
return {
icon:({1:greenIcon,
2:redIcon,
3:blueIcon,
4:blackIcon})[feature.getProperty('category')]
};
});
map.data.addListener('click', function(event) {
largeInfowindow.setOptions({
map : map,
position: event.feature.getGeometry().get(),
content : '<strong>'+event.feature.getProperty('description')+'</strong>'
})
});
map.data.addGeoJson(json);
}
var json={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {category:1,description:'Berlin'},
"geometry": {
"type": "Point",
"coordinates": [
13.392333984375,
52.53627304145948
]
}
},
{
"type": "Feature",
"properties": {category:2,description:'Hamburg'},
"geometry": {
"type": "Point",
"coordinates": [
10.008544921875,
53.57293832648609
]
}
},
{
"type": "Feature",
"properties": {category:3,description:'Cologne'},
"geometry": {
"type": "Point",
"coordinates": [
6.954345703125,
50.951506094481545
]
}
}
]
};
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>
Overlapping Pointers with MarkerClustererPlus and OverlappingMarkerSpiderfier
I have this map and displaying pointers based on users long and lat. now i have a problem with OverlappingMarkerSpiderfier. when there are more than 1 users with same long and lat. for example: 5 people live in the same building. i need OverlappingMarkerSpiderfier to show the count and then on click to sipderfy it. by default, OverlappingMarkerSpiderfier doesnt work that way.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52, 8),
zoom: 4
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true, keepSpiderfied: true});
markerClusterer.setMap(map);
here is the jsfiddle http://jsfiddle.net/gL3L7zso/62/
as you can see, when i click the battefield 3. its showing 1 pointer behind it hiding 3. i need it to be the same but, display the count of pointers hiding behind.
appreciate any solution for this.
update: to make the question more clear.
updated fiddle: http://jsfiddle.net/gL3L7zso/68
One option would be to put a label on each marker in the "cluster", and put the highest labeled marker on top.
oms.addMarker(marker);
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
proof of concept fiddle
code snippet:
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Bielefeld"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld2"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld3"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Herford"
},
"geometry": {
"type": "Point",
"coordinates": [8.676780, 52.118003]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh"
},
"geometry": {
"type": "Point",
"coordinates": [8.383353, 51.902917]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh2"
},
"geometry": {
"type": "Point",
"coordinates": [8.38, 51.9]
}
}]
};
var map = null;
var bounds = new google.maps.LatLngBounds();
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
var markerClusterer = new MarkerClusterer(map, [], {imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"});
minClusterZoom = 14;
markerClusterer.setMaxZoom(minClusterZoom);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.030656,8.528849),
zoom: 14
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
keepSpiderfied: true
});
oms.addListener('unspiderfy', function(spidered, unspidered) {
for (var i = 0; i < spidered.length; i++) {
spidered[i].setLabel("" + (i + 1));
spidered[i].setOptions({
zIndex: i
});
}
});
markerClusterer.setMap(map);
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
google.maps.event.addListener(marker, 'click', function(marker, e) {
return function() {
var myHTML = e.feature.getProperty('name');
boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
infobox.setPosition(e.feature.getGeometry().get());
infobox.setOptions({
pixelOffset: new google.maps.Size(0, 0)
});
infobox.open(map);
};
}(marker, e));
markerClusterer.addMarker(marker);
oms.addMarker(marker);
google.maps.event.addListener(map, 'idle', function() {
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
});
}
});
layer = map.data.addGeoJson(geoJson);
map.data.setMap(null);
google.maps.event.addListener(map, "click", function() {
infobox.close();
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js"></script>
<script src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox#1.1.14/dist/infobox.min.js"></script>
<div id="map"></div>
How to open markers popups on leaflet via external link
Considering a custom floor plan been showed with leaflet with markers loaded from a geojson file. Each of the markers have a related page and those pages have hyperlinks aiming to the map. I would like to add #id to those hyperlinks.
If for example, the map url was domain.com/map, the "Marker 1" page (domain.com/marker-1) would have a link (domain.com/map#maker-1) that would open the map with the actual marker for "marker 1" on the center of the map with it's popup open.
My question is how do I open the map with a certain marker on the center and with it popups open when I add a hash to the url (domain.com/map#maker-1)?
Here goes my code:
index.php
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="geojson.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<script src="map.js"></script>
</body>
geojson.js
var groupsGeoJson = {
"type": "FeatureCollection",
"features":[
{
"geometry": {
"type": "Point",
"coordinates": [-120,60]
},
"type": "Feature",
"properties": {
"popupContent": "<h1>Maker 1</h1>"
},
"id": 1
},
{
"geometry": {
"type": "Point",
"coordinates": [-80,40]
},
"type": "Feature",
"properties": {
"popupContent": "<h1>Maker 2</h1>"
},
"id": 2
}
]
};
map.js
var mapMinZoom = 2;
var mapMaxZoom = 6;
var mapIniZoom = 2;
var mapCenterLat = 20;
var mapCenterLng = -75;
var groupsIcon = L.icon({
iconUrl: 'images/silver_coin.gif',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -28]
});
var baseLayer = new L.TileLayer('layers/baseLayer/{z}/{x}/{y}.png', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
noWrap: true
});
var groups= L.geoJson(groupsGeoJson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: groupsIcon});
}, onEachFeature: onEachFeature
});
var map = new L.Map('map', {
layers: [baseLayer, groups],
center: new L.LatLng(mapCenterLat, mapCenterLng),
zoom: mapIniZoom
});
var southWest = map.unproject([0, 16384], map.getMaxZoom());
var northEast = map.unproject([16384, 0], map.getMaxZoom());
var mapBounds = new L.LatLngBounds(southWest,northEast);
map.setMaxBounds(mapBounds);
function onEachFeature(feature, layer) {
var popupContent = "<p>Test</p>"
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}