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];
Related
I know this is a common error but I'm not seeing my specific problem. Doing a little basic JS practice and running into this error only when using a nested array of coordinate pairs. If I only try and map one single location the error goes away. Any thoughts as to why this might be happening? Code below.
var options = {
center: [39.8333,-98.5833],
zoom: 4
}
// instantiate the leaflet object
var map = L.map('map', options);
// Get basemap URL from Leaflet Providers
var basemap_url = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
// Get basemap attributes from Leaflet Providers
var basemap_attributes = {
attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
}
// Add tileset as a layer in our map by passing as arguments to tileLayer method
var tiles = L.tileLayer(basemap_url, basemap_attributes);
// add tiles to map with addLayer method
map.addLayer(tiles);
// variable to hold string value of cities
var cities = ["Victoria", "Bettles", "Truth or Consequences"];
var cityCoords = [
[48.430077, -123.353043],
[66.905857, -151.533330],
[33.1284, -107.25283]
];
var cityPops = [92141, 13, 5948];
var cityCapitals = [true, false, false];
// loop through all the elements in the cities array
for(let i = 0; i <= cities.length; i++){
let cityName = cities[i];
let cityPop = cityPops[i];
let cityCap = cityCapitals[i];
let namePop = `<b>${cityName}</b><br> population: <b>${cityPop}</b><br>`;
let popup = `${cityName} population: ${cityPop}`
console.log(popup)
if (cityCap == true) {
popup += 'is a capital city'}
L.marker(cityCoords).addTo(map)
.bindPopup(popup);
}
As commented, replacing
L.marker(cityCoords).addTo(map)
with
L.marker(cityCoords[i]).addTo(map)
solves the problem by passing a LatLng array of numbers to marker as covered in documentation.
I deduce that Leaflet converts an array of arrays to null if the array should have contained numeric coordinate values, and then generates errors trying to access lat or lng properties of what should have been a valid conversion result.
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've created a simple div map in which I put a map created with a leaflet.js lib as follows:
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13});
Then I tried to use the d3 fisheye plugin to implement the distortion but I don't have results. Is it possible to use this plugin on leaflet map?
I tried the following code but probably the problem is that I don't use the object with x,y,z attributes returned by the called function.
var coordinates = [0, 0];
var svg = d3.select("#map");
svg.on("mousemove", function () {
var latlng = new Array();
coordinates = d3.mouse(this);
var point = L.point(coordinate[0],coordinate[1]);
var d = map.layerPointToLatLng(point);
latlng[0] = d.lat;
latlng[1] = d.lng;
fisheye.focus(latlng);
});
Can someone help me? Thanks
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') "});
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);