I'm trying to use Javascript to query a specific state so that only that state appears as a Fusion table on a Google Map. Here is the Javascript that doesn't work:
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
map = new google.maps.Map(document.getElementById('map_canvas'), { center: chicago, zoom: 4, mapTypeId: 'roadmap'});
var layer = new google.maps.FusionTablesLayer(531237, { query:"select geometry from 531237 where state_abbr = 'IL'"});
layer.setMap(map);
If I remove the where clause from the query, all states are returned...as expected. Anyone know what I'm doing wrong when all I want to do is grab the single state?
Turns out that the columns need to be the exact case. Here's the working code:
var layer = new google.maps.FusionTablesLayer(531237, { query:"select geometry from 531237 WHERE STATE_ABBR in ('AL', 'WI', 'CT') "});
Related
Im trying to change the mapview while using Bing maps API. I have my map initialized already but im trying to change the map view to center in on a pin who's location i have. Im merely trying to get the view to move using setView but im unsure how to move it.
function findpin() {
console.log("hello3");
var pin;
//loop through and find searched pin object
for (var i = 0; i < allPins.length; i++) {
if (searchbox.value == allPins[i].entity.title) {
pin = allPins[i];
break;
}
};
console.log(pin);
//set pin
pinSelected(pin);
//var locs = [array of Microsoft.Maps.Location];
//var rect = Microsoft.Maps.LocationRect.fromLocations(locs);
map = setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center:new Microsoft.Maps.Location(0, 0),
zoom:100,
});
console.log("hello5");
}
Assuming that you initialized the map by:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
Then you can use the setView on the instantiated map to update the view:
map.setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(0, 0),
zoom: 20
});
Notice that the max zoom level is 20.
I'm trying to measure the distance between a marker and a point that has been searched for by postcode. The idea is to make markers appear within a certain radius. as far as I can tell I've done it right but clearly not.
The current code for the function looks like this:
function setup_map(latitude, longitude) {
var _position = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 14,
center: _position
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
#foreach (var i in ViewData.Model)
{
<text>
var markerPos = {lat: #i.Lat, lng:#i.Long}
var distance = google.maps.geometry.spherical.computeDistanceBetween(markerPos, _position);
var marker = new google.maps.Marker
({
position: new google.maps.LatLng (markerPos),
map: map,
title: "" + (#i.id),
});
</text>
}
}
This function reloads the map and all the markers on it. At the minute I'm not too concerned with loading the markers within the radius. I just want to load them all.
When you click the search button, the map loads to the postcode entered but doesn't load any markers. If I remove the "var distance" line, it still goes to the postcode and loads all of the markers. So by process of elimination, there must be something wrong with this line but I have no idea what.
Using Google Maps API v3, I’m trying to do something like below to set zoom. The problem is this would give:
Error: Invalid value for property <zoom>: 10
Any help appreciated, thanks.
var mapInfo = [ [-34.397],[150.644],[10] ];
function initialize() {
var latlng = new google.maps.LatLng(mapInfo[0],mapInfo[1]);
var mapZoom = mapInfo[2];
var myOptions = {
zoom: mapZoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
Change
var mapInfo = [ [-34.397],[150.644],[10] ];
to
var mapInfo = [-34.397, 150.644, 10];
Then your code should work.
The problem was that what you had was an array of arrays. The square brackets denotes an array so you were passing a array that contained the value instead of value the value itself.
var mapZoom = mapInfo[0][2];
function initialize(){
// Creating a map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(53.0123601276819, -2.44519164333635),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var m = [];
function addMarker(title, lat, lng) {
m[m.length] = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title,
clickable: true,
icon: 'http://domain.com/MVC/images/full.png'
});
}
addMarker('Home', 53.0682143712504, -2.52150736731894);
addMarker('Away', 53.0123601276819, -2.44519164333635);
addMarker('Away', 59.0123601276819, -2.44519164333635);
// Create a LatLngBounds object
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < m.length; i++) {
// Insert code to add marker to map here
// Extend the LatLngBound object
bounds.extend(m[i]);
}
alert(m[0]);
map.fitBounds(bounds);
document.write(getBounds());
}
The above is my code.
My intentions are to develop a map which shows numerous markers and pans the zoom such that all the markers fit on my screen.
I am new to JS.
My understanding is that
var m = [];
creates an empty array.
Then everytime i call addMarker() the details get added to this array m
At the top I set a default zoom and center point.
I then add various markers.
I then loop through each key in the m array and extend the bounds using the data from this.
It is then my understanding that map.fitBounds(bounds); should redefine the zoom/center as applicable to fit all the markers.
It does not.
All my markers show, but the zoom/center is not auto adjusting as such, and I have no idea why.
Any advice would be greatly appreciated.
Thanks
You need to pass a LatLng object to the bounds.extend function.
Here is the code :
....
bounds.extend(new google.maps.LatLng(lat, lng));
....
Here is a clarification of the above answer which is correct except it's missing a parenthesis and a little brief.
//make an empty bounds variable
var bounds = new google.maps.LatLngBounds();
//do your map stuff here
//special note: make sure your lat and lng are floats or googleMaps will error
var lat = 38.103;
var lng = -121.572;
bounds.extend(new google.maps.LatLng(lat, lng));
//adjust the viewport of the map
//special note: this only needs to be done once, don't put it in a loop
map.fitBounds(bounds);
I'd like to know how to put multiple markers for Google Maps using Javascript API v3.
I tried the solution posted here, but it does not work for me for some reason:
var directionDisplay;
function initialize() {
var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, properties);
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];
function setMarkers(map, buildings) {
var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var bounds = new google.maps.LatLngBounds;
for (var i in buildings) {
var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
bounds.extend(myLatLng);
var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
}
map.fitBounds(bounds);
}
}
</script>
Could anyone kindly explain why this doesn't work for me?
This question is already a few months old, but I noticed that it remained unanswered. I guess the OP already found a way through this, but let me attempt an answer for the sake of completeness.
I can spot a few major problems in your code above:
First of all, you are trying to pass the properties array to the setMarkers() function, before properties is defined. Therefore setMarkers() will receive undefined for the second argument, which is why nothing is showing on your map.
Then, you are having a very common closure problem in that for in loop. Variables enclosed in a closure share the same single environment, so by the time the click callback from the addListener is called, the loop will have run its course and the i variable will be left pointing to the last value it had when loop ended.
In addition, you have a dangling comma in the array literal, which can cause a syntax error in some browsers.
To fix the first problem, simply define the properties array before calling setMarkers():
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
];
setMarkers(map, properties);
You can then solve the closure problem with even more closures, using a function factory:
function makeClickCallback(buildings, i) {
return function() {
window.location = ('detail?b=' + buildings[i][3]);
};
}
for (var i in buildings) {
// ...
google.maps.event.addListener(marker, 'click',
makeClickCallback(buildings, i);
}
This can be quite a tricky topic, if you are not familiar with how closures work. You may to check out the following Mozilla article for a brief introduction:
Working with Closures
Then you may want to make sure to remove the dangling comma in your array literal:
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'] // no comma
];
In addition, note that since there is just one element in your properties array, you will only get one marker on the map. I'm not sure if the other elements were removed for the sake of this example, but if it wasn't, simply add more locations like this:
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
['Another Location',50.505050,-75.505050,'Mjg5']
];