Clickable countries using Google Maps API - google-maps

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/

Related

Ionic 4 Google Map set Traffic Layer

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);
);

Changing Maps styles without resetting previous settings

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'}]
}
]})
}
});

Google Maps Icon is not showing on website

I'm trying to learn myself some more advanced code writing. And this week I'm learning about google maps and how to customize it.
I think I'm doing fine, but I have a problem with making an icon marker show on the actual website.
The program I use to make the website is dreamweaver and in the live view option the customized map and icon are both showing correctly. However, when I go to the actual website, the icon is missing. There is no marker at all on the google map. I could really use some help with this one.
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var styles = [
{
stylers: [
{ hue: "#0D6C91" },
{ saturation: 0 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}
];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.834250, 4.309755),
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('column_links'),
mapOptions);
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var image = '3. afbeeldingen/RLogo.png';
var myLatlng = new google.maps.LatLng(51.834250, 4.309755);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

google maps api - heatmap.set(data) property

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

Remove indoor maps from styled Google Maps

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.).