I'm trying to get the directionsPanel to show in a new window, but i can't seem to figure it out.
This is the function that sets the panel to a (hidden) div called 'directions-panel' in my HTML.
var directionsDisplay
var directionsService = new google.maps.DirectionsService();
function initialize() {
var positie = new google.maps.LatLng(51.25584,5.68196);
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 10,
center: positie,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
}
The code works fine but I want it to open in a new window. Sort off like a pop-up I guess. Anyone know how to do this?
The basic workflow would be:
//open a window
panel=window.open('about:blank','panel','width=200,height=300,scrollbars=yes');
//create a document inside te window
panel.document.open();
panel.document.write('<body/>');
panel.document.close();
//set the panel
directionsDisplay.setPanel(panel.document.body);
//bring window into front
panel.focus();
Problems:
depending on your application the popup-blocker of the browser may block this popup
in IE it doesn't work at all, because it isn't allowed to move nodes between documents(there are methods to achieve it, but they are not implemented by the API as it seems)
I would suggest to use something like a draggable Lightbox or a (jQuery) dialog to show the panel
Related
I have the following problem:
I'm working in an aplication to book hotels that has tabs ("Hotel Details", "Map", "Reviews") in the overview page. the tabs are created with angularjs.
also, in the page I have the hotel address that is a link to the "Map" tab.
When I click on the "Map" tab, the google map is rendering ok. But, when I click on the hotel address, the "Map" tab opens but the map is not centered. If I refresh the page, it appears centered.
this is the code that process the map:
$scope.loadMap = function (targetID){
var latitude = $scope.latitude;
var longitude = $scope.longitude;
if(latitude && longitude && document.getElementById(targetID) != null ){
var center = new google.maps.LatLng(latitude, longitude);
var map_options = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map(document.getElementById(targetID), map_options);
// configure marker
var marker_options = {
map: map,
position: center,
title: $scope.hotelName
};
// create marker
var marker = new google.maps.Marker(marker_options);
var infoWindow = new google.maps.InfoWindow();
window.setTimeout(function(){
google.maps.event.trigger(map, 'resize');
},2000);
}
}
Can you help me, please?
I've had this very problem when I was creating maps using Leaflet.js. I was trying to initialize the map inside of my angular service and it was loading very strangely. It appears you are trying to do the same thing, but you're doing it inside of your controller, rather than a service, but the effect is the same thing.
The problem is timing. Your controller is run before the DOM finishes loading and before angular has a chance to scan through the DOM to build out your Map page partial. Because of that, the page is only partially loaded when you call $scope.loadMap, which loads the google map, as you would expect. The problem is that once Angular finishes scanning the DOM partial, it modifies the DOM and then loads it into the view. When this happens, the google map has already been initialized to its default size based on the previous state of the DOM, and doesn't resize properly when angular is finished with the DOM.
Ok, that was a long explanation, but here's how you fix it:
You should do all of your map initialization inside of a directive's linking function. You could create a directive called something like app.directive('hotelMap'), which would initialize your map using the $scope.latitude and $scope.longitude variables from your controller.
link: function(scope, elem, attrs){
var center = new google.maps.LatLng(scope.latitude, scope.longitude);
var map_options = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map(document.getElementById(targetID), map_options);
// configure marker
var marker_options = {
map: map,
position: center,
title: $scope.hotelName
};
// create marker
var marker = new google.maps.Marker(marker_options);
var infoWindow = new google.maps.InfoWindow();
}
And then in your map partial, you would have an element that looks something like <div hotel-map></div>. This fixes your problem, because your map will never be initialized until Angular has finished scanning/modifying the DOM and has finished rendering your partial. That way, the map's containing element will be at its final size/position and the map will be loaded into the element's center properly. Give it a try and let me know if that works.
i'm trying to update kml files on the fly as described by google here:
https://developers.google.com/kml/documentation/updates?csw=1
my problem is: in my source code i triggered the update-load.kml after a short timeout
function initialize() {
...some code...
myParser.parse('./point-load.kml');
//so far everything is working fine, and the markers show up on the map
window.setTimeout("Update()", 5000);
}
function Update() {
myParser.parse('./update-load.kml');
}
after the update nothing happenes, no markers changed or moved, nothing...
the structure of my .kml files is exactly the same like in the link above
edit:
parsers added to function Update()
function Update() {
var center = new google.maps.LatLng(28.019440, -17.382813); //set map center
var mapOptions = {
zoom: 3, //set default zoom level
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL***
var myParser = new geoXML3.parser({map: map});
myParser.parse('./update-load.kml');
}
now: all markers dissapear
Not sure if this is possible but I have set my map up with custom styles and marker and I want to ensure the map shows at this level but with London in view. To do so I centred the map at a different location to my marker. I would like the map to zoom to my location if possible instead of the centre.
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
center: new google.maps.LatLng('51.4600368','0.0781994'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
Also if anybody can tell me why my info window is displaying all funky I would appreciate too.
It has been tough to understand your question but if I got you right, you are trying to fit both center of London and your location on the map without setting a center on some position on the map. If that's correct, then you need google.maps.LatLngBounds() to get it done.
var bounds= new google.maps.LatLngBounds();
var London= new google.maps.LatLng(//London values);
var myLatLng = new google.maps.LatLng(//your values);
bounds.extend(London);
bounds.extend(myLatLng);
map.fitBounds(bounds);
Check if this serves your purpose.
This is my javaScript code.
(function() {
window.onload = function() {
// Creating a reference to the mapDiv
var mapDiv = document.getElementById('map');
// Creating a latLng for the center of the map
var latlng = new google.maps.LatLng(37.09, -95.71);
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
center: latlng,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(mapDiv, options);
}
})();
When i add the disableDefaultUI: true to the options variable and test it on my Browsers(Opera,Firefox,Chrome Canary) it does not disable the UI. I am currently using Eclipse Indigo on My Mac OSX version 10.6.8. Is there a problem with my browsers cache or something? My code seems to be okay. I can't understand why it does not render on the browsers.
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
I can't remember exactly why the disableDefaultUI property didn't do anything on maps I've worked on recently. The way I got round it was to control each ui element directly.
var options = {
// Required map properties here
// Set how Zoom is to look
zoomControl : true,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.SMALL,
position : google.maps.ControlPosition.TOP_LEFT
}
}
While the example above modifies the Zoom controls to the compact plus and minus rather than slider, you can turn if off using:
zoomControl : false
All the other UI elements have these type of controls also. You can see them all here
I want to draw a custom rectangle which is resizable and draggable with a close button and
which is formed with the bounds returned by the query in the database.
Thanks
This is a rectangle resizable and dragabble. A little search and some trying would give you what you need.
function initialize() {
var myOptions = {
center: new google.maps.LatLng(44.5452, -78.5389),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.490, -78.649),
new google.maps.LatLng(44.599, -78.443)
);
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Hope this helps!
I think the only thing you need to add is "draggable: true" in rectangle options.
So, it should be something like this;
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
This will make the rectangle resizable and draggable. Also in the body of the page create one button.
<body >
<button onclick="remove()">Close</button>
</body>
Inside remove function you can write your code to connect to database. You will have to declare the bounds outside initialize() to access it. This link might help you to understand how to connect google maps and MySQL. https://developers.google.com/maps/articles/phpsqlajax_v3