Hope someone can help me with this, im trying to show two direction points with zoom and centered so i can just show the 2 points instead of all the map! it seems that the zoom doesn't work.
here is my code
var map;
function initialize(){
var mapOptions = {
zoom: 14,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var request = {
origin:"Mexico",
destination:"Montreal",
travelMode: google.maps.TravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
// Indicamos dónde esta el mapa para renderizarnos
directionsDisplay.setMap(map);
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
thanks in advance
To fix your problem change:
disableDefaultUI: true,
to
disableDefaultUI: false,
From the [Google Maps API]: https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults
You may instead wish to turn off the API's default UI settings. To do
so, set the Map's disableDefaultUI property (within the Map options
object) to true. This property disables any automatic UI behavior from
the Google Maps API.
If you still want to disable UI elements, you should probably do them individually.
Related
I have two types of map tiles, and I want to be able to switch between them using layers with a custom html control. Both will have the same tilesize and the other options that I have set. The only difference is that one is located in normal map folder and the other in gridmap folder.
This is the code that I use to display one map:
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.MySimple
}).setView([0, 0], 2);
L.tileLayer('normalmap/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tileSize: 268,
noWrap: true,
tms: false,
continuousWorld: true
}).addTo(map);
I tried to follow the leaflet example: http://leafletjs.com/examples/layers-control.html
But no luck.
Can someone explain to me how to add 2 maps with a custom control?
Keep a reference to both your tile layers and add/remove them as appropiate:
var map = L.map(...);
var tilelayer1 = L.tileLayer('map1/{z}/{x}/{y}.jpg', { ... });
var tilelayer2 = L.tileLayer('map2/{z}/{x}/{y}.jpg', { ... });
tilelayer1.addTo(map);
document.getElementById('switch-layers').addEventHandler('click', function(ev){
if (map.hasLayer(tilelayer1)) {
map.addLayer(tilelayer2);
map.removeLayer(tilelayer1);
} else {
map.addLayer(tilelayer1);
map.removeLayer(tilelayer2);
}
})
Keep in mind that you can create layers and not add them to the map right away.
I am using Google Maps for AngularJS and have the following Jade code:
#map_canvas
google-map(center='map.center', zoom='map.zoom', draggable='true', options='options', events='map.events')
marker(coords='marker.coords', options='marker.options', idkey='marker.id')
In my angular controller I have:
$scope.map = {center: {latitude: 42.2405, longitude: -8.7207 }, zoom: 12, events: {
click: function (map, eventName, args) {
$scope.marker.coords.latitude = args[0].latLng.lat();
$scope.marker.coords.longitude = args[0].latLng.lng();
console.log($scope.marker);
}
}
}
$scope.marker = {
id: 0,
coords: {
latitude: 42.2405, longitude: -8.7207
},
options: { draggable: true }
}
What I am trying is to update the marker location with every click.
At console.log($scope.marker); I can see that my marker does print the updated coordinates value but the red pin does not move on the map.
I can't figure what I am doing wrong.
EDIT:
The marker does move to the new location after I resize the map, so I figured it is a matter of the map no refreshing when marker location changes. Should this be reported as a bug? Anything I can do to solve it?
Finally! After reading a bit on $apply() here and here and finding solutions like this one where it mentions to:
wrap your callback body into $scope.$apply(function () { ... });. Remember
that your event is coming from "non-Angular" world.
I found this other post where it just adds $scope.$apply(); to the end of the click function.
This last solution was the only one working for me.
I've posted all the process cause I consider it interesting to learn about $apply().
i´m using the openlayers drawing example inside my mobile JS (qooxdoo) app and all works fine except that the drawing cursor is above the viewport
so I can draw but I don´t see the cursor and I can only see the drawing after I scroll down.
I have used this qooxdoo example as a base. I have also added all the css rules from the openlayers example to my qooxdoo styles.
Seems like a css position issue, but I can´t seem to find it.
Any help would be appreciated.
/**
* Loads JavaScript library which is needed for the map.
*/
_loadMapLibrary: function() {
var self = this;
var req = new qx.bom.request.Script();
var options = {
singleTile: true,
ratio: 1,
isBaseLayer: true,
wrapDateLine: true,
getURL: function() {
var center = self._map.getCenter().transform("EPSG:3857", "EPSG:4326"),
size = self._map.getSize();
return [
this.url, "¢er=", center.lat, ",", center.lon, "&zoom=", self._map.getZoom(), "&size=", size.w, "x", size.h].join("");
}
};
req.onload = function() {
var vector = new OpenLayers.Layer.Vector('Vector Layer', {
styleMap: new OpenLayers.StyleMap({
temporary: OpenLayers.Util.applyDefaults({
pointRadius: 16
}, OpenLayers.Feature.Vector.style.temporary)
})
});
// OpenLayers' EditingToolbar internally creates a Navigation control, we
// want a TouchNavigation control here so we create our own editing toolbar
var toolbar = new OpenLayers.Control.Panel({
displayClass: 'olControlEditingToolbar'
});
toolbar.addControls([
// this control is just there to be able to deactivate the drawing
// tools
new OpenLayers.Control({
displayClass: 'olControlNavigation'
}), new OpenLayers.Control.ModifyFeature(vector, {
vertexRenderIntent: 'temporary',
displayClass: 'olControlModifyFeature'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Point, {
displayClass: 'olControlDrawFeaturePoint'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Path, {
displayClass: 'olControlDrawFeaturePath'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Polygon, {
displayClass: 'olControlDrawFeaturePolygon'
})]);
var osm = new OpenLayers.Layer.OSM();
osm.wrapDateLine = false;
map = new OpenLayers.Map({
div: 'googleMap',
projection: 'EPSG:900913',
numZoomLevels: 18,
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}), new OpenLayers.Control.Zoom(), toolbar],
layers: [osm, vector],
center: new OpenLayers.LonLat(0, 0),
zoom: 1,
theme: null
});
// activate the first control to render the "navigation icon"
// as active
toolbar.controls[0].activate();
}
req.open("GET", this._mapUri);
req.send();
},
Please check the z-Index of the cursor's class. The best way is to modify the z-Index through Chrome's debugger console or Firebug.
Is there any live example of your application available?
According to the documention a marker is optional with an infoWindow, so how is this achieved please? I have tried infowindow.open(map) and infowindow.open(map,null) but both produce nothing.
If the position is set, there is no problem showing the info window
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 55.6761, lng: 12.5683},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infowindow = new google.maps.InfoWindow({
content: "Copenhagen"
});
infowindow.setPosition({lat: 55.6761, lng: 12.5683});
infowindow.open(map);
}
infowindow.open(map) makes no sense since you need to specify the position where the infowindow should open, also it has a tapered stem which specifies the location where it should point.
According to the documentation of Infowindows- InfoWindows may be attached to either Marker objects (in which case their position is based on the marker's location) or on the map itself at a specified LatLng.
So if you donot want the marker to open the infowindow, use the map click event-
var iwindow= new google.maps.InfoWindow;
google.maps.event.addListener(map,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,this);
iwindow.open(map,this);
});
And to close a InfowWindow- infowindow.setMap(null);
Hope that cleared your doubts.
Since the api has changed, it is not possible to set position on info window any more. the solution i found is to add a marker to the map with visibility false:
this.map.addMarker({
position: {
'lat': sites[0].latitude,
'lng': sites[0].longitude
},
// setting visible false since the icon will be the poi icon
visible: false
}).then((marker: Marker) => {
this.htmInfoWindow.open(marker);
});
I have the the following Lat Long coordinates (in a JS array), how can we draw the Google Map with markers on these coordinates.
Please give a simple example, as the examples in the API documentation do not really give a conclusive answer or are too complex for me.
43.82846160000000000000, -79.53560419999997000000
43.65162010000000000000, -79.73558579999997000000
43.75846240000000000000, -79.22252100000003000000
43.71773540000000000000, -79.74897190000002000000
Thanks in advance.
You may try this
var map,
locations = [
[43.82846160000000000000, -79.53560419999997000000],
[43.65162010000000000000, -79.73558579999997000000],
[43.75846240000000000000, -79.22252100000003000000],
[43.71773540000000000000, -79.74897190000002000000]
];
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('Current location is: '+ locations[i][0]+', '+locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
DEMO.
I have worked with google maps and if you just need to place a few markers (make sure you are using API v3) v2 is depreciated and will fall off at some point. Next, your lat/long coords. They need to be clipped down to 9 or 10 chars. I have been unlucky when I go with super-long lat/long Coords values.
Google has a nice tool that lets you build a map with. Start here:
https://developers.google.com/maps/documentation/javascript/
Realize you will need a key on your webhosts domain. You can get your key here:
https://developers.google.com/maps/signup
A long list of demos, with 65 v3 API examples.
https://developers.google.com/maps/documentation/javascript/demogallery
In the demos i found this example which looks to be close. Reuse the code you find by viewing the source. You can see the lat/long coord pairs and how it calls it with this link.
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/data.js
Here is a campus map example.
http://beta.gr-3.net/map-api/
Finally, here is the simplest example. A one marker map. Look at the source and reuse it. Hopefully it will be enough to get you started.
https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple
I hope all this is helpful.
First, you would create google maps object, somewhere within head tag you would listen for ready event and in the handler have:
var mapOptions =
{
zoom: 10,
center: new google.maps.LatLng( <%= #drawings.first.latitude %>, <%= #drawings.first.longitude %> ),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
This assumes you have a div in your html with id map_canvas.
Than you should be ready to add markers to the page, you should have your coordinates stored in an array, so you can iterate through it and those markers.
for( var i=0; i < coords.length; i++ )
{
latlng = coords[i].latitude + ", " + coords[i].longitude;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: '',
icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(coords.length + 65) + ".png"
});
}