I don't know if it's google's recent changes in 3.14 or if I'm missing something but I need to get rid of local businesses / points of interest on my map. What's going on here? I need to hide disneyland and other similar points of interest.
var mapOptions = {
zoom: 16,
zoomControl:false,
streetViewControl:false,
panControl:false,
mapTypeControl:false,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: {
featureType: "poi",
//elementType: "labels",
stylers: [{
visibility: "off"
}]
}
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
styles is expected to be an array, but you provide an object.
Fixed style:
styles: [{
featureType: "poi",
//elementType: "labels",
stylers: [{
visibility: "off"
}]
}]
http://jsfiddle.net/4mtyu/389/
Related
I need to add in Traffic Layer into my google maps. It seem like I am not able to get the traffic Layer. Please Help, thanks in advance.
ngAfterContentInit(): void {
this.maps = new google.maps.Map (
this.mapElement.nativeElement,
{
center: { lat: 3.068352 , lng:101.602965 },
zoom: 14,
styles: [{
featureType: 'poi',
stylers: [{ visibility: 'on'}]
}, {
featureType: 'transit.station.bus',
stylers: [{ visibility: 'on'}]
}, {
featureType: 'transit.station.rail',
stylers: [{ visibility: 'on'}]
}],
}
this.maps.trafficLayer = new google.maps.trafficLayer(),
this.trafficLayer.setMap(this.maps);
);
did anyone ever try to style the Fonts/Lines/etc of the GoogleMaps-Sattelite View? I know about SnazzyMaps and other Google Maps customizer, but they dont have a sattelite style option?
Thanks for helping out,
Julia
UPDATE:
I figured out to get rid of all the labels on the hyprid/sattelite view.
Using:
var mapStyle = [
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
and use it when creating the map:
function createMap(standort) {
map = new google.maps.Map(
mapElem,
{
zoom: 12,
minZoom: 3,
mapTypeId: 'hybrid',
mapTypeControl: false,
styles: mapStyle,
disableDefaultUI: true,
}
}
);
I just have one more question, does anyone know how I get rid of the street/Border-Overlay--> Example here
I have just started dabbling in Google Maps API, but I am already stuck. I am looking for a way to recreate this type of map with google maps. I would need to remove all labels, get a blank background (I tried using a map style, but that didn't work for me, code example below) and light up the countries as I hover over them.
Are there any tutorials that I seem to have missed in my search that could help me or can anyone point me in the right direction? :)
var _mapstyle = [
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
function create_map()
{
_map = new google.maps.Map(document.getElementById("eyewebz-map"),
{
zoom: 2,
center: new google.maps.LatLng(20, 0),
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: true,
mapTypeIds: ['_mapstyle']
});
_display.setMap(_map);
_display.setPanel(document.getElementById("NavigationText"));
}
EDIT
This is what the map would be used for: I have traveled a bit in my life and expect to do a lot more of it. Since my first big trip, I have been keeping a blog. I have now developed a new blog and I would like to make the countries that I've been to clickable and follow a url once they have been clicked. The ideal situation would be that when I click a country, it takes me to a page where only that specific country is shown in a map with some markers (places to visit). Once you click those markers, it should show a specific post/some information.
Something like this would be ok? Copy and paste inside a HTML page body (JSFiddler here).
<style type="text/css">
#map-canvas {
height: 600px;
width: 800px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// the map
var map;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// initialize the map
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
// these are the map styles
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},
{
featureType: "landscape",
stylers: [
{ hue: "#ffff66" },
{ saturation: 100 }
]
},{
featureType: "road",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.land_parcel",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.locality",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.neighborhood",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.province",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.man_made",
stylers: [
{ visibility: "off" }
]
},{
featureType: "landscape.natural",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: '#ff9900',
strokeOpacity: 1,
strokeWeight: 0.3,
fillColor: '#ffff66',
fillOpacity: 0,
name: rows[i][0]
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 0.4});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0});
});
google.maps.event.addListener(country, 'click', function() {
alert(this.name);
});
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
This is a modified version of this
Fusion Tables Layer Example: Mouseover Map Styles.
You should also take a look to Styled Maps.
Another thing you may be interested in is Natural Earth Data. This in the case you need a polygon data source. And here an example of using it GViz API Example: Fusion Tables Data Source.
As the fusion tables are deprecated there is no inbuilt google solution to do this.
Here is small sample code that i made:
https://github.com/arturssmirnovs/Clickable-countries-using-Google-Maps-API
and working sample here: https://arturssmirnovs.github.io/Clickable-countries-using-Google-Maps-API/json/
I am creating a simple google map with heatmap layer. Importantly, I am not setting the data property of the heatmap initially:
var map, heatmap;
var home = new google.maps.LatLng(37.75, -122.4)
function initialize() {
var mapOptions = {
zoom: 10,
minZoom: 3,
center: home,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};
var styles = [
{
stylers: [
{ "gamma": 0.83 },
{ hue: "#00ffe6" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.setOptions({styles: styles});
heatmap = new google.maps.visualization.HeatmapLayer({
radius: 20,
opacity: 0.5
});
heatmap.setMap(map);
then I create a function which should set the data property of the heatmap, like this:
function update(){
all = [[37.782551, -122.445368, 0.75, 0.25],
[37.782745, -122.444586, 0.5, 0.5],
[37.782842, -122.443688, 0.2, 0.8]]
temp = []
for (var i = 0; i < all.length; i++){
temp.push(new google.maps.LatLng(all[i][0], all[i][1]), all[i][2])
}
var newdata = new google.maps.MVCArray(temp);
heatmap.set('data', heatmap.get('data') ? null : newdata)
}
finally, i call the update function in a bounds_changed event and initialize the map:
google.maps.event.addListener(map, 'bounds_changed', function() {
update;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
However, when I inspect the heatmap variable in the console, the data property is null. Why is this? and how do I set the data property in a function call?
calling heatmap.set('data', heatmap.get('data') ? null : newdata); is problematic.
Remove that and it works.
working fiddle
I understand how to initialise a map with custom styles like the following:
var styles = [
{
featureType: "water",
stylers: [
{ visibility: "on" },
{ color: "#ffffff" }
]
}
];
var mapOptions = {
zoom: 13,
maxZoom: 15,
minZoom: 12,
center: new google.maps.LatLng(50.924229,-1.396841),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
styles: styles
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
But is it possible to change to another style once the map has already been initialised? For example changing the colours of the map when certain events are triggered?
Yes. just use
map.setOptions(mapOptions);
Yes, create a new style object and then change the style by setting the option:
map.setOptions({styles: styles});