google maps api - heatmap.set(data) property - google-maps

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

Related

Clickable countries using Google Maps API

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/

Google Map not displaying after applying custom style

I have nearly finished the code below which displays markers from an array, each with their own infoBox.
The final step is to style the map but despite following many online tutorials to the letter (changing the relevant bits to match my code) all I am getting is a totally grey map.
Here is my code:
// Set up map
var map;
var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var store_pins = new Array();
var pin_marker = new Array();
var pin_info = new Array();
var pin_infoop = new Array();
var pin_infotxt = new Array();
// Style Map
var style_map = [
{
"featureType": "administrative",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#00ffff" }
]
}
];
var styledMap = new google.maps.StyledMapType(style_map,{name: "Styled Map"});
store_pins = [
[‘Test Pin 1’, 55.144178, -2.254122,'pin','bellinghamcoop.jpg’,’Test Pin 1’],
[‘Test Pin 2’, 55.018754, -1.672230,'rugby','kingparktigers.jpg’,’Test Pin 2’]
];
var myOptions = {
zoom: 3,
minZoom: 3,
center: google.maps.LatLng(55.144178,-2.254122),
mapTypeControlOptions:
{
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
}
map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
// Main Loop
for(i=0;i<store_pins.length;i++)
{
var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
var pinIcon = {
url: 'icons/shirtpin.png',
//The size image file.
size: new google.maps.Size(50, 55),
//The point on the image to measure the anchor from. 0, 0 is the top left.
origin: new google.maps.Point(0, 0),
//The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
anchor: new google.maps.Point(25, 20)
};
var pinShape = {
coord: [0,0,50,55],
type: 'rect'
};
pin_marker[i] = new google.maps.Marker(
{
position: pos,
map: map,
title: store_pins[i][0],
icon: pinIcon,
shape: pinShape,
zIndex: 107
}
);
//Creates the information to go in the pop-up info box.
pin_infotxt[i] = document.createElement("div");
pin_infotxt[i].style.cssText = pop_up_info;
pin_infotxt[i].innerHTML = '<span class="pop_up_box_text"><img src="content/TShirts/'+store_pins[i][4]+'" border="0" id="imgid'+i+'"/><h align="center">'+store_pins[i][5]+'</h></span>';
pin_infoop[i] = {
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-241, 0),
zIndex: null,
boxStyle: {
background: "url('infobox/pop_up_box_top_arrow.png') no-repeat",
opacity: 1,
width: "380px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "icons/button_close.png",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
content: pin_infotxt[i]
};
google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
return function() {
for ( h = 0; h < pin_marker[i].length; h++ ) {
pin_marker[h].infobox.close();
}
map.panTo(this.position);
map.setZoom(15);
pin_info[i].open(map, this);
}
})(pin_marker[i], i));
pin_info[i] = new InfoBox(pin_infoop[i]);
}
};
I am sure it will be something simple.
Hope someone can help.
Jim
The simplest way to do it is to just apply the styles to the map:
var myOptions = {
zoom: 3,
minZoom: 3,
center: map_center,
styles: style_map,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
proof of concept fiddle (unless you really want to have another map type)
code snippet:
var map;
var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";
google.maps.event.addDomListener(window, 'load', initialize);
var store_pins = [];
var pin_marker = [];
var pin_info = [];
var pin_infoop = [];
function initialize() {
var map_center = new google.maps.LatLng(55.144178, -2.254122);
// Style Map
var style_map = [{
"featureType": "administrative",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "on"
}, {
"color": "#00ffff"
}]
}];
// var styledMap = new google.maps.StyledMapType(style_map,{name: "Styled Map"});
store_pins = [
['Test Pin 1', 55.144178, -2.254122, 'pin', 'bellinghamcoop.jpg', 'Test Pin 1'],
['Test Pin 2', 55.018754, -1.672230, 'rugby', 'kingparktigers.jpg', 'Test Pin 2']
];
var myOptions = {
zoom: 3,
minZoom: 3,
center: map_center,
styles: style_map,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
// Main Loop
for (i = 0; i < store_pins.length; i++) {
var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
var pinIcon = {
url: 'icons/shirtpin.png',
//The size image file.
size: new google.maps.Size(50, 55),
//The point on the image to measure the anchor from. 0, 0 is the top left.
origin: new google.maps.Point(0, 0),
//The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
anchor: new google.maps.Point(25, 20)
};
var pinShape = {
coord: [0, 0, 50, 55],
type: 'rect'
};
pin_marker[i] = new google.maps.Marker({
position: pos,
map: map,
title: store_pins[i][0],
// icon: pinIcon,
// shape: pinShape,
zIndex: 107
});
pin_infoop[i] = {
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-75, 0),
zIndex: null,
boxStyle: {
background: "white",
opacity: 1,
width: "150px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "icons/button_close.png",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
content: store_pins[i][5]
};
pin_info[i] = new InfoBox(pin_infoop[i]);
google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
return function() {
map.panTo(this.position);
map.setZoom(10);
pin_info[i].open(map, this);
}
})(pin_marker[i], i));
}
};
#trackingT-map {
height: 400px;
width: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="http://www.staff.org.au/infobox.js"></script>
<div id="trackingT-map"></div>

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>

"dragend" method for marker in Google Maps

I have a problem with my marker in Google Maps. This is my code:
var map;
var geocoder;
var current;
var styles = [
{
stylers: [
{ hue: "#00c0eb" },
{ saturation: -10 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
}
];
var NewEventMarker;
function changeMarkerPosition(marker, ll) {
marker.setPosition(ll);
}
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
scaleControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setOptions({styles: styles});
google.maps.event.addListener(map, 'click', addNewEvent);
}
function codeAddress() {
var address = "London";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = new google.maps.MarkerImage("/img/markers/user-m.png",
new google.maps.Size(32.0, 49.0),
new google.maps.Point(0, 0),
new google.maps.Point(16.0, 24.0)
);
var marker = new google.maps.Marker({
map: map,
icon: image,
flat: false,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function addNewEvent(event){
var NEMlatLng;
if(NewEventMarker == undefined){
NewEventMarker = new google.maps.Marker({
map: map,
draggable: true,
icon: "/img/markers/marker-add.png",
position: event.latLng,
title: "Добавить событие"
});
} else {
changeMarkerPosition(NewEventMarker, event.latLng);
}
google.maps.event.addListener(NewEventMarker,'dragend',function(event) {
alert(event.latLng);
});
}
The idea of this code is when user clicks on a map, start work function - addNewEvent, and as you can see, if there is already exists "NewEventMarker", it just moves this marker to a place where user clicks, and if there are no marker, it creates. So if you try my code you can see, that if i click, for example two or three times on a map, marker will moves, but when i drag my marker, starts work function that assigned to 'dragend' event. But it will be works so many times, how much i clicked on a map. How can i fix it?
When i try to add google.maps.event.addListener(NewEventMarker,'dragend'....... to other places in my code i get an error: Cannot read property '_e3' of undefined
Please help me ;)
Evgeny, you did almost everything right but for each click you attach new event handler for dragend. Because of that you got several dragend events and for each event one alert.
Solution is to just move event handler to if statement and add event listener only in case if NewEventMarker is created (only first time):
function addNewEvent(event){
var NEMlatLng;
if (NewEventMarker == undefined){
NewEventMarker = new google.maps.Marker({
map: map,
draggable: true,
icon: "marker-add.png",
position: event.latLng,
title: "Добавить событие"
});
google.maps.event.addListener(NewEventMarker, 'dragend', function(event) {
alert(event.latLng);
});
} else {
changeMarkerPosition(NewEventMarker, event.latLng);
}
}

How to add multiple styles of Google Maps using StyledMapType?

I have added one additional style to a Google Map, following Google's instructions.
However I have had no sucess adding more than one style. Can this be achieved? If so, how?
Here is an example: http://jsfiddle.net/mikegoodstadt/A9zwa/3/
Many thanks for any suggestions,
Mike
var geocoder;
var map;
var MAPTYPE_1;
var MAPTYPE_2;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlngLondon = new google.maps.LatLng(51.507335, -0.127683);
var latlngMarrakech = new google.maps.LatLng(34.02590, -6.83640);
var style1 = [
{
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 },
{ "gamma": 0.99 },
{ "lightness": -4 },
{ "hue": "#ffc300" },
{ "saturation": -14 }
]
}
];
var style2 = [
{
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 },
{ "gamma": 0.99 },
{ "lightness": -4 },
{ "hue": "#ff6e00" },
{ "saturation": -14 }
]
}
];
var mapOptions = {
zoom: 12,
center: latlngLondon,
mapTypeControl: 1,
panControl: 0,
streetViewControl: 0,
zoomControl: 0,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MAPTYPE_1, MAPTYPE_2]
},
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var mapType1 = new google.maps.StyledMapType(style1, {name: 'London'});
var mapType2 = new google.maps.StyledMapType(style2, {name: 'Marrakech'});
map.mapTypes.set(MAPTYPE_1, mapType1);
map.mapTypes.set(MAPTYPE_2, mapType2);
}
function codeAddress() {
var address = document.getElementById("search-address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Buscedad sin exito: " + status);
}
});
}
You need to declare/set the setMapTypeIDs
map.mapTypes.set('MAPTYPE_1', mapType1);
map.setMapTypeId('MAPTYPE_1');
map.mapTypes.set('MAPTYPE_2', mapType2);
map.setMapTypeId('MAPTYPE_2');