I am trying to use bing map to search location city and zip codes for Denmark(DK).
But some times it is not working property. I have tried using the following code with SDK:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
});
var geoDataRequestOptions = { entityType: 'PopulatedPlace' };
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var requestOptions = new Microsoft.Maps.Search.GeocodeRequestOptions();
requestOptions.bounds = map.getBounds();
requestOptions.where = "1011 København K, DK";
requestOptions.callback = function (answer, userData) {
map.setView({ bounds: answer.results[0].bestView });
};
searchManager.geocode(requestOptions);
});
I also tried to search "1011 København K, DK" with bing map on https://www.bing.com/ its not working perfactly for me.., where as some times it working fine that is if i have search "1052 København K, DK" or "København K, DK" it will be fine please help me for the same issue..
Looking around I can't find any mapping platform that can find "1011 København K, DK". It is either a very new address or invalid one.
Related
When click on grid item, I pass lat and long for source and destination and route display on the map.
But everytime I see latitude and longitude on [A] and [B] route point instead of address.
So how to display address on [A] and [B] point instead of lat, long ?
Following is my code.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', () => {
that.directionsManager = new Microsoft.Maps.Directions.DirectionsManager(that.map);
that.directionsManager.clearAll();
// Set Route Mode to driving
that.directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
that.directionsManager.setRenderOptions({
drivingPolylineOptions: {
strokeThickness: 3
}
});
const waypoint1 = new Microsoft.Maps.Directions.Waypoint({
location: new Microsoft.Maps.Location(that.truckData.currentLat, that.truckData.currentLong)
});
const waypoint2 = new Microsoft.Maps.Directions.Waypoint({
location: new Microsoft.Maps.Location(that.truckData.workLat, that.truckData.workLong)
});
that.directionsManager.addWaypoint(waypoint1);
that.directionsManager.addWaypoint(waypoint2);
that.directionsManager.calculateDirections();
If you want something else to display instead of the coordinates, pass it into the address property of the waypoints as shown in this code sample: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/directionscreatedrivingroute
The ClusterLayer constructor works fine but I want to change what pins are on the ClusterLayer later in the code. setPushpins() seems like the desired function here but I am getting an Uncaught TypeError: Cannot read property '_v8Map' of undefined. This is a sample of what I have so far
window.map = new Microsoft.Maps.Map("#map_canvas",
{credentials:maps_key,
enableSearchLogo:false,
showCopyright:false,
mapTypeId:Microsoft.Maps.MapTypeId.road,
zoom:4,
scrollwheel:true,
center:new Microsoft.Maps.Location(us_latitude, us_longitude)
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function(){
//Generate 1,000 random pushpins in the map view.
//var pins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var pins = [];
var latitude = 43;
var longitude = -120;
var loc = new Microsoft.Maps.Location(latitude, longitude);
pin = new Microsoft.Maps.Pushpin(loc);
pins.push(pin);
//Create a ClusterLayer and add it to the map.
var loc = new Microsoft.Maps.Location(latitude+10, longitude+10);
pin = new Microsoft.Maps.Pushpin(loc, options);
pins.push(pin);
var clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
map.layers.insert(clusterLayer);
clusterLayer.setPushpins(pins);
});
How should I go about changing which pins are part of a ClusterLayer?
Testing the setPushpins function I do see the error you are seeing. Interestingly after ignoring the error message the clusteringLayer adds the pushpins and works fine. I'll have the team look into why this error is being thrown.
I have a map of bing maps and I use has created pushpin do with double click. And now I want to make limits pushpin only <= 20.
If it has been over the limit point is then automatically pushpin cannot be displayed. Although double click in map.
But I don't understand how to create it. Can you help me? Thanks a lot. Gbu.
My code to show pushpin
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
Microsoft.Maps.Events.addHandler(map, 'dblclick',getLatlng );
}
//show pushpin
function getLatlng(e) {
if (e.targetType == "map")
{
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var locTemp = e.target.tryPixelToLocation(point);
var location = new Microsoft.Maps.Location(locTemp.latitude, locTemp.longitude);
alert(locTemp.latitude + "&" + locTemp.longitude);
var pin = new Microsoft.Maps.Pushpin(location, { 'draggable': false });
map.entities.push(pin);
alert("Done");
Microsoft.Maps.event.addListener(map, 'click', function (event)
{
}
// limit pushpin
*How to create limit pushpin?*
In the getlatlng function you can do a simple check to see how many shapes are on the map. You can get the number of shapes on the map in your application by doing the following:
var cnt = map.entities.getLength();
I am using version 7.0 of the Bing Maps API. After creating the map, an array of pins are pushed into the EntityCollection object of the map class. Next, I want to center the map so that all of these pins are viewed on the map. The map's zoom is large enough to accommodate this. In the previous version, map.setMapView() was used, but BING Maps 7.0 has erased this function.
Some code for relevance:
map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions);
map.getCredentials(function(credentials) {
var searchRequest = 'https://dev.virtualearth.net/REST/v1/Locations/' + address + '?output=json&jsonp=getLatLong&key=' + credentials;
var mapscript = document.createElement('script');
mapscript.type = 'text/javascript';
mapscript.src = searchRequest;
document.getElementById('myMap').appendChild(mapscript);
});
function getLatLong(json){
findPlaceResults = new Microsoft.Maps.Location(json.resourceSets[0].resources[0].point.coordinates[0], json.resourceSets[0].resources[0].point.coordinates[1]);
myShape = new Microsoft.Maps.Pushpin(findPlaceResults);
//...
var pins = new Array();
for (var i = 0; i < AllLocations.length; i++) {
var shape = new Microsoft.Maps.Location(AllLocations[i].Latitude, AllLocations[i].Longitude);
var pins = new Microsoft.Maps.Pushpin(shape);
map.entities.push(pins);
}
map.entities.push(myShape);
if (map.entities.getLength() > 0) {
//map.SetMapView(pins);
}
Code TLDR: Stuff happens, try to SetMapView, doesn't work.
Any thoughts would be helpful!
When you creating your pins you need to create helper array will that lead to your goal.
Create array that contains all the locations converted to Microsoft location objects.
// The array
var arrLocations= [];
for (var i = 0; i < AllLocations.length; i++) {
var shape = new Microsoft.Maps.Location(AllLocations[i].Latitude,AllLocations[i].Longitude);
// You add those two lines.
var yourLocation= new Microsoft.Maps.Location(AllLocations[i].Latitude,AllLocations[i].Longitude);
arrLocations.push(yourLocation);
var pins = new Microsoft.Maps.Pushpin(shape);
map.entities.push(pins);
}
Now you use bing maps feature that gives you best zoom and pointing according to given locations.(The LocationRect)
var bestView = Microsoft.Maps.LocationRect.fromLocations(arrLocations);
Then you set the map view according to the best view that we found.
setTimeout((function () {
map.setView({ bounds: bestView });
}).bind(this), 1000);
Well, I found the answer at this website http://www.i-programmer.info/projects/131-mapping-a-gis/1609-getting-started-with-bing-maps-ajax-control-70.html?start=1
"If you are familiar with earlier versions of the Map object you need to know that the new version has far fewer methods. The idea is that instead of having lots of methods the new control has a few methods that accept complex objects as a parameter that specifies lots of settings.
For example, the original map control's SetCenter method will move the map location to the specified latitude and longitude. The new V7 map control has a setView method which accepts a ViewOptions object which in turn has a center property that can be set to a Location object which specifies the center of the map."
I can't seem to get the my map markers to display when I use an image sprite on the iphone. They appear when I use the standard google map markers on iphone and when viewing the site in the desktop the sprite icons work fine.
Here is the code I use to create the markers, I am using Zepto but JQuery could as easily apply.
$.ajax({
dataType: 'jsonp',
url: myLocations.LocatorUrl,
timeout: 8000,
success: function(data) {
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
$.each(data, function(index, item){
var data = item, pincolor,
latLng = new google.maps.LatLng(data.lat, data.lng);
var d = 'http://blah';
var pinImage = new google.maps.MarkerImage(d+"/assets/img/sprite.locator.png",
new google.maps.Size(24, 36),
new google.maps.Point(0,25),
new google.maps.Point(10, 34));
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.type,
icon: pinImage
});
bounds.extend(latLng); // Extend the Latlng bound method
var bubbleHtml = '<div class="bubble"><h2>'+item.type+'</h2><p>'+item.address+'</p></div>'; // Custom HTML for the bubble
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(bubbleHtml);
infoWindow.open(map, marker);
});
markers.push(marker); // Push markers into an array so they can be removed
})(marker, data);
});
map.fitBounds(bounds); // Center based on values added to bounds
}, error: function(x, t, m) {
console.log('errors')
if(t==="timeout") {
alert("got timeout");
} else {
alert(t);
}
}
});
Got it. Turns out the images I was referencing were on localhost, when I swapped this to the actual IP address of my local machine it worked.