Related
I'm trying to add some custom options to my map so that the user can toggle certain things on and off like Transit, roads, and POI's. However it seems that when I use setOptions, it forgets my previous settings and applies the new ones.
For example. In the code below, transit icon labels are turned off by default. However when I click the POI toggle, the transit icons would appear.
How do I overcome this obstacle? I tried a few ways like:
Creating a variable that stores the styles. However I don't see how I can retrieve just the settings I want to change
Creating a layer with the styles. I tried doing this but there doesn't seem to be a way to create layer with default Google Maps styles.
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 43.693226, lng: -79.383184},
styles: [
{
featureType: 'transit',
elementType: 'labels.icon',
stylers: [{visibility: 'off'}]
},
{
featureType: 'poi',
elementType: 'labels',
stylers: [{visibility: 'off'}]
},
]
});
var poiToggleOn = false;
document.getElementById('poiToggle').addEventListener('click', function() {
if (poiToggleOn === false) {
poiToggleOn = true;
map.setOptions({styles: [
{
featureType: 'poi',
elementType: 'labels',
stylers: [{visibility: 'on'}]
}
]})
} else {
poiToggleOn = false;
map.setOptions({styles: [
{
featureType: 'poi',
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
]})
}
});
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 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/
I'm trying to make a styled google map with just the Boston subway lines, land, and water. I set the visibility of everything to off, but some buildings are still showing up, and it looks like its only buildings with indoor maps.
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var lat = 42.3581;
var long = -71.0636;
google.maps.visualRefresh = true;
function initialize()
{
var mapStyle =
[
{
featureType: 'administrative',
elementType: 'all',
stylers:
[
{ visibility: 'off' }
]
},
{
featureType: 'landscape',
elementType: 'all',
stylers:
[
{ visibility: 'off' }
]
},
{
featureType: 'poi',
elementType: 'all',
stylers:
[
{ visibility: 'off' }
]
},
{
featureType: 'road',
elementType: 'all',
stylers:
[
{ visibility: 'off' }
]
},
{
featureType: 'transit',
elementType: 'all',
stylers:
[
{ visibility: 'off' }
]
},
{
featureType: 'water',
elementType: 'all',
stylers:
[
{ visibility: 'off' }
]
},
{
featureType: 'landscape',
elementType: 'geometry',
stylers:
[
{ color: '#ffffff' },
{ visibility: 'on' }
]
},
{
featureType: 'water',
elementType: 'geometry',
stylers:
[
{ color: '#e5e5e5' },
{ visibility: 'on' }
]
}
];
var mapOptions =
{
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16,
backgroundColor: '#ffffff',
streetViewControl: false,
mapTypeControl: false,
panControl: false,
zoomControl: false,
scrollwheel: true,
draggable: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
var styledMapOptions = {name: 'Map'};
var newMapType = new google.maps.StyledMapType(mapStyle, styledMapOptions);
map.mapTypes.set('stylized', newMapType);
map.setMapTypeId('stylized');
onResize();
}
google.maps.event.addDomListener(window, 'load', initialize);
function onResize()
{
document.getElementById("map-canvas").style.height = window.innerHeight - document.getElementById("map-canvas").getBoundingClientRect().top + 24 +"px";
}
</script>
</head>
<body onResize="onResize()">
<div id="map-canvas"/>
</body>
</html>
I also tried this, which worked but it turned my transit layer off too, and I need the transit layer for the colored subway lines:
featureType: 'all',
elementType: 'all',
stylers:
[
{ visibility: 'off' }
]
The only way I found to achive this, is to disable everything and then putting each major style section back to visible afterwards in the styles json.
You can use the following as a reset styles json to remove indoor maps
[
{"stylers": [ {"visibility": "off" } ] },
{"featureType": "water","stylers": [{"visibility": "on"} ] },
{"featureType": "poi","stylers": [ {"visibility": "on"} ]},
{"featureType": "transit","stylers": [{ "visibility": "on"}] },
{ "featureType": "landscape","stylers": [ { "visibility": "on" } ] },
{ "featureType": "road", "stylers": [{ "visibility": "on" } ] },
{ "featureType": "administrative", "stylers": [{ "visibility": "on" } ] },
/* followed by your style if you have specific styles
, otherwise remove the last comma */
]
The following worked for me:
{
featureType: 'indoor',
stylers:
[
{ visibility: 'off' }
]
}
As of this response, there is no way to disable indoor maps. It is yet to be added to the style API.
However, as mentioned above, disabling all geometry will remove indoor maps as well.
I was having the same issue where if I zoomed in to much, the interiors of buildings started to show that was conflicting with the styles I had set. I was able to solve this and get rid of the interiors by using Google's Style Map Wizard and started by adding a layer with everything turned off. Then layer by layer adding what I needed (road geometry, landscape, etc.).
I am facing lot of performance issues first while loading 4000/5000 markers on map and then showing /hiding 1000 of markers.
Both setMap() and setVisible() work slowly for me. Sometimes browser is also getting crashed.
However, I have seen many websites using Google maps api V3 which load many markers seamlessly. So I can't compromise on speed.
Does anyone has any idea how to achieve it?
With this amount of markers, you need to use a marker clustering technique or Fusion Table.
There is a nice article from Google here with the solutions you can use:
https://developers.google.com/maps/articles/toomanymarkers
I've been trying to push the limits of the JJWDesign Google Maps Package for SugarCRM. 5,000 markers seems to map easily. I begin to see performance issues when trying to map 25,000+. But, I think it greatly differs between browsers. I've seen horrible performance on older IE browsers (IE6). Google Chrome seems to have the best performance.
Below is a video of mapping 5000+ Leads from SugarCRM. Note, the Leads are pre-geocoded by the Google Geocoding API. Data is transferred into the view via JSON.
Google Maps Demo of 5000+ Leads Mapped within SugarCRM:
https://www.youtube.com/watch?v=kPbRV0aLia4
You can view the main Javascript functions on this page:
GitHub.com Porject:
https://github.com/jjwdesign/JJWDesign-Google-Maps/blob/master/SugarModules/modules/jjwg_Maps/views/view.map_markers.php
This is because you are adding markers in html page.I too had similar issue when load 1000 markers on html page itself. this is because may be you are using loop to add marker in html page. try to add markers in angular. this will speed the process and now i am able to load 20000+ markers
$scope.map_function = function(){
homeService.homemapdata($scope.dummy).success(function(data){
$scope.all_device_location=data.all_device_location;
$scope.map_center = data.map_center;
var myLatlng = new google.maps.LatLng(cities[0]['latitude'],cities[0]['longitude']);
var mapOptions = {
center: myLatlng,
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
],
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Geo Location /
// navigator.geolocation.getCurrentPosition(function(pos) {
// // map.setCenter(new google.maps.LatLng(mapcenter[0]['latitude'],mapcenter[0]['longitude']));
// var myLocation = new google.maps.Marker({
// position: new google.maps.LatLng(pos.coords.latitude,
// pos.coords.longitude),
// map: map,
// icon: {
// path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
// scale: 3
// },
// // animation: google.maps.Animation.DROP,
// title: "My Location"
// });
// });
bounds = new google.maps.LatLngBounds();
$scope.map = map;
// Additional Markers //
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(info.latitude, info.longitude),
map: $scope.map,
animation: google.maps.Animation.DROP,
});
loc = new google.maps.LatLng(info.latitude, info.longitude);
bounds.extend(loc);
marker.content = '<div class="infoWindowContent">' + info.device_user__name + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + info.device__device_name + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
map.fitBounds(bounds);
$timeout(function() {
$scope.markerClusterer = new MarkerClusterer(map, $scope.markers, { maxZoom: 20});
$scope.location_loading=false;
}, 1);
});
}