I followed a sample code to create a fusion tables map with 'heatmap' (hotspots as I called it) but it's not working. Could someone take a look on it, please?
I don't know whether the problem is with some syntax element (but the code didn't break) or with the form element? Another possibility could be that there are just a few points, and it's not possible to produce a heatmap only with that points. But I never heard of such a technical issue.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'ENDERECO_GOOGLE'",
from: 3767057
},
map: map
});
google.maps.event.addDomListener(document.getElementById('heatmap'),
'click', function() {
var heatmap = document.GetElementById('heatmap');
layer.setOptions({
heatmap: {
enabled: heatmap.checked
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<input id="heatmap" type="checkbox" />
<label>Hotspots</label>
</div>
</body>
</html>
You've got 2 syntax errors in the file you posted.
document.GetElementById();
// must be
document.getElementById();
and
layer.setOptions()
// must be
layerl0.setOptions()
Related
can't seem to make this works
function initialize() {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById('map-BDG'), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
};
google.maps.event.addDomListener(window, 'load', initialize);
the map itself is displayed, but the markes does not appear, and so is the title
according to this tutorial I need to write marker.setMap() to show marker, but as you can see I already write it
if the problem itself is not in the javascript then this might be the problem
the order including the script in HTML :
<html>
<<link rel="stylesheet" type="text/css" href="css/map.css"/>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8&callback=initMap"></script>
<script src="js/map.js"></script>
</html>
NEW PROBLEM
why is the map sometimes appears sometimes disappears? I mean when I refresh the page, it disappears, the I refresh several times and it re appears
It seems that everything is fine, take this code as an example and check yours maybe you find any difference
google.maps.event.addDomListener(window, "load", function () {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById("map-BDG"), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
markerBDG.setMap(mapBDG);
});
#map-BDG{
width:500px;
height:300px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Maps Example</h1>
<div id="map-BDG"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8"></script>
<script src="script.js"></script>
</body>
</html>
I should warn you that I am very new to website creation and Javascript. With that out of the way. Because of that I have a google map widget on a website I am creating. It has made the map creation really easy, but if I really need to I guess I could try at coding it myself. That aside, I would like to add buttons on the side of the map that will go to some markers I have created.
I am having difficulties getting the map object to manipulate it after its created. I can't seem to find what the widget calls the map object and so I just can't use the idea of making my map variable a global object.
I am just trying to change the default zoom to start with. Below is what what I am basically trying to do but whenever the code is executed, but my map turns into a gray box on my screen.
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
margin: 0 auto 0 auto;
}
</style>
</head>
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
function initMap() {
var map;
var myOptions = {
center: {lat: 40, lng: 50},
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
function newLocation(newLat, newLng) {
//var mymap = new google.maps.Map(document.getElementById('map'));
var mymap = document.getElementById('map');
mymap.setZoom(4);
}
</script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>
Looking at the google developer tools I get this error
"Uncaught TypeError: mymap.setZoom is not a function." I think this means I am getting the map area not the map itself.
Therefore is it possible to grab an instance of the map so I could manipulate it?
Your not referencing the correct map variable that you create in initMap()
What I would change is make the map variable global, so all of your functions including newLocation() can access this map variable.
Your implementation is using mymap in the newLocation() function, this has access to the div container of the map, not the actual map object itself, which is why you can not change properties such as zoom.
Try structuring it something like so, so you have the correct reference to the map variable.
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
margin: 0 auto 0 auto;
}
</style>
</head>
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var myOptions = {
center: {lat: 40, lng: 50},
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
}
google.maps.event.addDomListener(window, 'load', init_map);
function newLocation(newLat, newLng) {
map.setZoom(4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>
So I have this:
<iframe src="https://mapsengine.google.com/map/embed?mid=zkXLRR9SQKDQ.kfLF9HxBaALo&z=15" width="100%" height="100%"></iframe>
I managed to find the zoom code on here, however I couldn't find a way to remove the grey bar that appears at the top of the map with my google account stuff.
A screenshot can be found here.
Is there a way to remove this using a URL parameter?
I don't think it's possible to remove the bar. Instead you could use the Google Maps Javascript API. It's fairly easy to use and gives you much more control. Here's an example that loads your location with the right zoom level: plnkr.co.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(51.4893169, -2.1182648);
var mapOptions = {
center: latLng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Documentation for the API.
If you need a specific style for your map, you can use the Styled Maps Wizard.
Depending on where you put your map on your page, it might conflict with scrolling. If that is the case, then set the scrollwheel option to false. That allows you to scroll over the map without it highjacking the scroll event for it's zoom functionality. I've updated the plnkr to use scrollwheel: false.
I just can't understand why this simple example of MarkerManager shows no marker. I am opening a map at a center point and then adding one marker to the marker manager. When the map initializes there is no marker.
What am I missing?
Thanks, Rick
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<script type="text/javascript">
var map;
var mgr;
function initialize() {
center = new google.maps.LatLng(40.1352891590710, -105.1035852680550)
var myOptions = {
zoom: 18,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
var marker = new google.maps.Marker({
position: center,
title: 'marker'
});
mgr.addMarker(marker);
mgr.refresh();
mgr.show();
alert(mgr.getMarkerCount(18));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="height: 800px;"></div>
</body>
</html>
The documentation tells me that addMarker takes two arguments:
addMarker(marker:Marker, minZoom:Number, opt_maxZoom:Number) | None | Add a single marker to the map.
change the call in your code to:
mgr.addMarker(marker, 0);
I'm trying to install the new Google APIv3 Map for our event pages here (middle of the page).
The current map is the old embedded one and I can't get the new one to show.
I've got the API key and need to use a postcode parameter like the one currently:
<div class="event-map">
<iframe src="http://maps.google.co.uk/maps?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&ie=UTF8&hq=&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&z=14&iwloc=near&output=embed"></iframe>
</div>
<% end if %>
The following is the code from Google:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
Here's the code I've tried, but doesn't work:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html { height: 100% }
body { height: 100%; }
#map-canvas { height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&key=&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Any help would be great
Updated code:
<div id='map-canvas'></div>
<script src="http://maps.googleapis.com/maps/api/js?q=<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom&key=&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geolocate = function(address, callback) {
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json",
data: {
"sensor": true,
"address": address
},
dataType: "json",
success: function(d) {
if (d.status == "ZERO_RESULTS") callback(false);
if (d.results && d.results[0] && d.results[0].geometry) {
callback({
"ne": d.results[0].geometry.bounds.northeast,
"sw": d.results[0].geometry.bounds.southwest,
"center": d.results[0].geometry.location
});
}
else callback(false);
}
});
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
geolocate("<%=server.URLEncode(""&rs("ca_postcode"))%>&hnear=<%=Session("PublicFranchiseName")%>+<%=server.URLEncode(""&rs("ca_postcode"))%>,+United+Kingdom", function(c) {
map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have corrected your bug (which was due to the URI of the API) and added a geolocation call to the Google API for you. An example of your code is visible at the following address: http://tinker.io/95285
The geolocation call is done through AJAX. I have chosen to include jQuery in this fiddle. Replace the call with your usual AJAX library if you are not using jQuery. The geolocation API code is inspired off my demo code for the API available here.
If you have any questions, feel free to ask!
Please note that your API key is at no point necessary for what you are doing. Also, seeing as it is currently public, you may want to change it.