I can't achieve zoom on kml map, I am using same solution that is given here:
google-maps-zoom-gets-over-riden-when-using-a-kml-file . You can see my jsfiddle here:
jsfiddle for kml map zoom.
If I remove preserveViewport: true from that example it will load the map with it I am not getting map.
The map needs to be initialized with a center. You are currently not doing that if you set preserveViewport to false; where do you expect the map to be centered?
Your (problematic) code:
var myOptions = {
zoom: 20,
center: null,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("kmlMapCanvas"), myOptions);
Either set the center explicitly or let the KmlLayer do it for you.
From the documentation:
center LatLng The initial Map center. Required.
It seems like it is working fine. :) Are you sure?
Related
Does anyone know how can i get the static image of my currently displayed google map. I have used this code to get the googl map in a div
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(0,0),
zoom:1,
scrollwheel:false,
disableDefaultUI: true,
draggable: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
I amm using thise url to get the static image
http://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=1&size=750x425&sensor=false&visual_refresh=true&scale=1
However i am not getting the image same as the one displayed by the function.
The maximum allowed width/height without a business-license is 640px
What you can do: use a scale of 2, set the zoom to 0 and for width/height use the half size:
http://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=0&size=350x212&sensor=false&visual_refresh=true&scale=2
Note: the result will not be exactly the same, because the zoom is different. You'll see different labels(at zoom 0 e.g. you'll see no labels)
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.
I am trying to get started with the Google Maps API, but I'm finding the documentation incredibly confusing. Does anyone know how to find the coordinates for an image for a ground overlay?
I copied the code here (https://developers.google.com/maps/documentation/javascript/overlays#GroundOverlays) and have it working on my website with my image. But when I try to change the coordinates from Newark to my location, the image does not appear at all. I've just been guesstimating the coordinates for the imageBounds and I'm guessing that's what is causing it not to work. Any help would be most appreciated.
This is my code (the LatLng coordinates are copied from the example):
function initialize() {
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.712216,-74.22655),
new google.maps.LatLng(40.773941,-74.12544));
var myOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var oldmap = new google.maps.GroundOverlay(
"http://www.mcography.com/beta/Accessibility_Map.png",
imageBounds);
oldmap.setMap(map);
}
I use the LatLng Marker and LatLng tooltip options of maps.google.com labs (link is in the right bar - bottom). Once I get it close, I simply make small tweaks to my LatLng numbers.
Also it looks like you may be using the wrong corners for your LatLngBounds box. It should be Southwest (bottom left) then Northeast (top right). Using the wrong corners has the effect of not showing an image.
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});
I'm trying to run the first example in the tutorial, and it works fine, except that my controller (zoom, etc..) are all messy.
I'm using V3.
Please take a look in the image:
The code I'm using is:
<div id="map_canvas" style="width:800px; height:600px;"></div>
<script type="text/javascript">
jQuery(function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
});
</script>
Thoughts?
Thanks
Solution:
If this ever happens to you, take a look at your css.
In my case, I was adding some padding to the divs, and it also affected divs inside google maps area.
first of all check on another browser (if you didn't yet). If other browser displays it right try to set position of UI by yourself like here
If problem still exist nothing more is comming to my head.
Mariusz