I have Google Maps:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables layers</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: 4,
center: {lat: 39.8282, lng: -98.5795}
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
var layer;
var layer1;
//state level
if(zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if(zoom_level >= 7) {
layer = null;
layer.setMap(null);
layer1 = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer1.setMap(map);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
When I zoom in to zoomlevel 7 and above, I still see state level (layer) and not layer1. How can I reset layer when zoom in?
I would suggest that if you only ever want one layer at a time, only create one, hide it before creating a new version.
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
if (layer) layer.setMap(null);
//state level
if (zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if (zoom_level >= 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
});
proof of concept fiddle
code snippet:
var layer;
var layer1;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: 39.8282,
lng: -98.5795
}
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
if (layer) layer.setMap(null);
//state level
if (zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if (zoom_level >= 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
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>
Related
I can't seem to find any documentation about updating the path of an icon (marker) in the Google Maps API. In this particular example I'm trying to change the fillOpacity of the icon from 0 to 1.
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: position,
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
this.setOptions({icon:{fillOpacity: 0.5}}); // Not working
this.setIcon({fillOpacity: 0.2}); // Not working either
});
The "icon" is an anonymous object. You need to set the whole object again:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
or:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setOptions({
icon: myIcon
});
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
I am working on this demo. Why am I getting this error:
overlay.getBounds is not a function
while trying to get bounds of drawn rectangle on the map?
var rectangle;
var map;
var drawingManager;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 44.5452,
lng: -78.5389
},
zoom: 9
});
drawingManager = new google.maps.drawing.DrawingManager();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log( start);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function drawRec() {
//Setting options for the Drawing Tool. In our case, enabling Polygon shape.
if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
rectangle.overlay.setMap(null);
}
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
strokeColor: '#6c6c6c',
strokeWeight: 3.5,
fillColor: '#926239',
fillOpacity: 0.6,
editable: true,
draggable: true
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
You get the error: "overlay.getBounds is not a function", because overlay.getBounds() is not a function. overlay is not a google.maps.Rectangle, but it has an overlay property which is.
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log(start.toUrlValue(6));
});
updated fiddle
code snippet:
var rectangle;
var map;
var drawingManager;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 44.5452,
lng: -78.5389
},
zoom: 9
});
drawingManager = new google.maps.drawing.DrawingManager();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log(bounds.toUrlValue(6));
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function drawRec() {
//Setting options for the Drawing Tool. In our case, enabling Polygon shape.
if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
rectangle.overlay.setMap(null);
}
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
strokeColor: '#6c6c6c',
strokeWeight: 3.5,
fillColor: '#926239',
fillOpacity: 0.6,
editable: true,
draggable: true
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
Check the documentation:
https://developers.google.com/maps/documentation/javascript/drawinglayer#drawing_events
The overlay event in your event listener has two properties:
overlay
type
So you'd need to change your code to something like this:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlayEvent) {
rectangle = overlayEvent.overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = rectangle.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
});
The generated path is composed of series of circles. I want it to be a line. Thanks!
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map, polylineOptions:{strokeColor: '#98c28a',
strokeOpacity: 0,
strokeWeight: 4,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#98c28a',
fillOpacity: 1,
scale: 2,
strokeColor: '#98c28a',
strokeOpacity: 1,
},
offset: '0',
repeat: '10px'
}]}, suppressMarkers:true });
Remove the icons from your Polyline definitions, and make the strokeOpacity non-zero
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map,
polylineOptions:{
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4
},
suppressMarkers:true
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
polylineOptions: {
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4,
},
suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
directionsService.route({
origin: "New York, NY",
destination: "Boston, MA",
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
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"></script>
<div id="map_canvas"></div>
What is the correct way to specify the stroke color inline, for each Feature object in the constructor of a FeatureCollection GeoJSON object? I am trying many ways to set it blue below, but the result is still the default black stroke color. Thanks!
Fiddle
<head>
<title>LineString Colors</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 33.9720, lng: -81.0527},
zoom: 6
});
map.data.addGeoJson({
"type": "FeatureCollection",
"features": [
{"type": "Feature",
"geometry":
{"type": "LineString",
"coordinates": [[-81.0527, 33.9720],
[-79.6651, 34.9167],
[-85.0252, 38.6221]],
"strokeColor": "#0000FF",
},
"strokeColor": "#0000FF",
"style": {"strokeColor": "#0000FF"}
}
],
"strokeColor": "#0000FF"
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
See the documentation on Styling GeoJson data
If you just want all the polylines to be blue, all you have to do is:
map.data.setStyle(function (feature) {
return {
strokeColor: "#0000FF"
};
});
But, if as you imply in your title, you want to specify the colors in the GeoJSON, you can set strokeColor in the properties of the feature, then you can retrieve it with getProperty:
var strokeColor = feature.getProperty('strokeColor');
Then use that to set the color of the polyline dynamically:
map.data.setStyle(function (feature) {
var strokeColor = feature.getProperty('strokeColor');
return {
strokeColor: strokeColor,
strokeWeight: 2
};
});
proof of concept fiddle
code snippet:
var map;
function initMap() {
var gbounds = new google.maps.LatLngBounds();
gbounds.extend(new google.maps.LatLng(33.9720039368, -81.052734375));
gbounds.extend(new google.maps.LatLng(34.9167518616, -79.6651229858));
map = new google.maps.Map(document.getElementById('map'), {
center: gbounds.getCenter(),
zoom: 6
});
map.data.setStyle(function(feature) {
var strokeColor = feature.getProperty('strokeColor');
return {
strokeColor: strokeColor,
strokeWeight: 2
};
});
map.data.addGeoJson({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-81.052734375, 33.9720039368],
[-79.665122985799997, 34.916751861599998],
[-85.025260925300003, 38.622150421100002]
],
},
properties: {
"strokeColor": "#0000FF"
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-80.1, 33.9],
[-79.6, 34.916751861599998],
[-85.1, 39.6]
],
},
properties: {
"strokeColor": "#FF0000"
}
}]
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<title>LineString Colors</title>
<div id="map"></div>
I've looked through a lot of the similar questions on here, but have not found anything that will answer my question. I am new to JS and GoogleMaps API v3, and have successfully followed their tutorials to get this far. However, I'd like to have an infowindow with custom content appear based on which marker is clicked, and I cannot figure out how to do this. I'd also like to have this be possible with around 100 markers, so I'd like to know the best way to do this as well without things getting too messy. To be clear, there are 3 types of icons, but there will eventually be many markers associated with each icon, so I will need content linked to each "feature". Hopefully I've got a good start here and am not way off base. I've included the code for the page. Thank you so much in advance for any help anyone can provide.
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 800px;
height: 500px;
background-color:#CCC;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.137551,-0.703125),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
map.set('styles', [
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#888888' },
{ weight: 1.0 }
]
}, {
featureType: 'landscape',
elementType: 'geometry.fill',
stylers: [
{ hue: '#008f11' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ hue: '#054d8fd' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'off' }
]
}
]);
var iconBase = 'http://i1318.photobucket.com/albums/t658/greatergoodorg/';
var icons = {
people: {
name: 'People',
icon: iconBase + 'people_zps26d13009.png',
shadow: iconBase + 'shadow-people_zps4b39eced.png'
},
pets: {
name: 'Pets',
icon: iconBase + 'pets_zps15f549f2.png',
shadow: iconBase + 'shadow-pets_zps361068aa.png'
},
planet: {
name: 'Planet',
icon: iconBase + 'planet_zps2a8572ce.png',
shadow: iconBase + 'shadow-planet_zps9912e26b.png',
}
};
var data = ["This is the first one", "This is the second one", "This is the third one"];
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
shadow: {
url: icons[feature.type].shadow,
anchor: new google.maps.Point(21, 32)
},
animation: google.maps.Animation.DROP,
map: map
});
/*...
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map,marker);
});
...*/
/*...
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
...*/
}
var features = [
{
position: new google.maps.LatLng(33.137551,-0.703125),
type: 'planet'
},
{
position: new google.maps.LatLng(44.234234,-0.232233),
type: 'pets'
},
{
position: new google.maps.LatLng(54.234234,-0.032233),
type: 'people'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(
document.getElementById('legend'));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><strong>Project Types</strong></div>
</body>
</html>
This will open an infowindow and display the "type" string in it
var infowindow = new google.maps.InfoWindow();
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
shadow: {
url: icons[feature.type].shadow,
anchor: new google.maps.Point(21, 32)
},
animation: google.maps.Animation.DROP,
map: map
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(feature.type);
infowindow.open(map,marker);
});
}