While instantiating an object of google.maps.Map class, I want to set the width and height of the map.
var mapOptions = {
center: new google.maps.LatLng(122.5, 200),
mapTypeId:google.maps.MapTypeId.HYBRID;
zoom: 15,
scaleControl: false,
};
this.map.mapObject = new google.maps.Map(document.getElementById("google_map"), mapOptions);
I'm using above code to create instance of Google map but I dont know how to use google.maps.Size class.
Could anyone please explain how to use google.maps.Size class ?
There is no size property in the MapOptions object. You have to make sure your HTML element ("google_map") has a valid size when the map is created or trigger the "resize" event on the map object once it has a valid size.
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)
I am using Google Maps API V3, I would like to know how I can change the position of the elements (shown in picture http://www.pikky.net/uploads/d6964cfad0bb97cc3ada7852df260a715234d69a.png) when the user is INSIDE Street View.
Thanks,
Mirko
You achieve this by defining your StreetViewPanoramaOptions to a StreetViewPanorama object that you will initialize to your map variable when declaring the map options. It's in the StreetViewPanoramaOptions that you can determine the positions of the controls for when you're in the street view. (Refer to this document for more info https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaOptions ). Here is a snippet on how to approach this. (Note: this should all be done in your initialize() function prior to initializing your map variable).
First we will declare a variable for StreetViewPanoramaOptions and change options as we desire:
var panoramaOptions = {
addressControlOptions : { position : google.maps.ControlPosition.BOTTOM_CENTER },
zoomControlOptions : { position : google.maps.ControlPosition.TOP_RIGHT},
enableCloseButton : true,
visible: false //set to false so streetview is not triggered on the initial map load
};
The next step is to declare a StreetViewPanorama object that is set to the container/div of the map with the StreetViewPanoramaOptions from above:
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
Lastly, we declare the map options and set the map variable with the map options like we would normally do. Except, in the map options we set the streetView option to the panorama variable:
var mapOptions = {
center: new google.maps.LatLng(42.345573,-71.098326),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView : panorama //this is where we set the panorama object to the map
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Refer to this source for how to position controls in the map div ( https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning )
I have set a google maps (api v3) on div.
Then I want to retrieve the map via the div.
Doing something like
theMap = $('.myDiv').theGoogleMap;
I can't find this simple info. Thank you for your help.
Maybe this it's too late for the original poster, but might helpful for others. I also spent some time searching before solving it by myself. Turns out to be really simple.
Assuming the div that holds the map looks like this:
<div id="myMap"></div>
When creating the map, add a reference to map object as a property to the document element that holds the map:
// Create the map
originalMapObject = new google.maps.Map('myMap', map_options);
// Get the DOM Element
var element = document.getElementById('myMap');
// Create a random property that reference the map object
element.gMap = originalMapObject;
When you need the map object again, just do something like this
gmap = document.getElementById('myMap').gMap
Hope it helps.
well, you can't do that, you can declare a global variable and save in that variable the reference to the map object. Look at the sample in the google documentation.
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Also here is a Javascript tutorial:
https://developer.mozilla.org/en/JavaScript/Guide
The API doesn't work that direction. You must retain a reference to the object in javascript when you create it. You cannot lookup the map object from the DOM reference.
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 want to reload google map with new markers when the user select an option from the select field.Please help me how to refresh/reload google map with new markers.
Right now the store is getting reloaded from the change option the the select field. But the markers are not getting refreshed and are still showing the old results.
I'm trying :
mapToRefresh = Ext.getCmp("mapaSearch");
mapToRefresh.update(mapPositions[0]);//mapPosition is the new lat,long
mapToRefresh.rendered = false;
mapToRefresh.render();
But it's not working.i'm getting this error:
Uncaught TypeError: Cannot read property 'ownerDocument' of null
Thanks
I had the same issue with the map. It would be much more simpler and efficient to clear the markers and update the map with the new markers on select change.
If you need to render the map the best way to achieve this is to destroy the map and recreate it again on select change.
Hope this helps.
This problem occurs when the site is connected to two google maps.
And on another page of one of the map is not available. You must add it and hide...
Example:
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(59.938863, 30.311556),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'map_style']
}
};
var mapOptionsNew = {
zoom: 17,
center: new google.maps.LatLng(59.939119, 30.317952),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'map_style']
}
};
map = new google.maps.Map(document.getElementById('id-map'),apOptions);
mapNew = new google.maps.Map(document.getElementById('id-map1'),mapOptionsNew);