How can I change position of the map, from where it is pointing now, to ie. 45.00,19.00, but in a runtime, now when map is initialized?
my application have to "jump" from some coordinates to other, so that's why I need this ability.
ok, here it is:
MyMap.map.setCenter(new google.maps.LatLng( 45, 19 ) );
Create that Map object, save it to a variable (i.e. map) and then use map.panTo().
See the reference of Map
you need the extended MVCObject() ....
there you find getPosition() (return: LatLng) and setPosition(latlng:LatLng)
you just need to set this property and map location will change
Define the place where to position
Pass that to map.setCenter()
var map;
function initMap() {
var container = document.getElementById('map');
var options = {
zoom: 18,
gestureHandling: 'cooperative',
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(container, options);
var myPlace = { lat: 23.7266, lng: 90.4216 };
map.setCenter(myPlace);
}
Related
I am following the Josh morony's tutorial and
trying to get the bounds information of google map.
But the outcome of getBounds() is "undefined"
How can I get the value of getBounds()?
My developing environment is
"Ionic2 (2.0.0-rc.4) + typescript"
And my code is like below
initMap(): Promise<any> {
this.mapInitialised = true;
return new Promise((resolve) => {
let latLng = new google.maps.LatLng(37.481223, 126.952701);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement, mapOptions);
let bounds = this.map.getBounds();
console.log(bounds); <-- output "undefined"
resolve(true);
});
}
Thanks in advance ! :)
Try this one :)
this.map.getBounds().getSouthWest().lat(),
this.map.getBounds().getNorthEast().lat(),
this.map.getBounds().getSouthWest().lng(),
this.map.getBounds().getNorthEast().lng()
Ensure that your map is initialized and tiles loaded by listening for the tilesloaded event. This code example would output Latitude and Longitude values for and map bounds change such as panning or zooming.
google.maps.event.addListener(this.map, 'tilesloaded', () => {
console.log(this.map.getBounds().getNorthEast().lat());
console.log(this.map.getBounds().getNorthEast().lng());
console.log(this.map.getBounds().getSouthWest().lat());
console.log(this.map.getBounds().getSouthWest().lng());
});
I'm using geoXMl3 to parse multiple kml files at a time.
I'm getting polygons plotted on the map. when I click on the polygon an info-window pops up. I'm not getting from where this info-window is coming up
My requirement is I want to edit the content of info-window through some java-script object
My java-script object will be like
popUpDetails = {'district-name':'content'}.
Not getting how to pass this in my parser
I have refered few links like:
https://code.google.com/p/geoxml3/wiki/Usage
and also how could I put data dynamically from database in infowindow of a certain polygon?
I'm parsing kml files this way:
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var parser = new geoXML3.parser({
map: map,
processStyles: true,
zoom: false,
});
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < ListofPathsofkmlfiles.length; i++) {
parser.parse([ListofPathsofkmlfiles[i]]);
}
Advance thanks for your help
I have finally figured out solution for same.
You need to overwrite createPolygon attribute of your parser for same.
var districtInfoMap = {doc_url1:infowindow_content1, doc_url2:infowindow_content2 };
var parser = new geoXML3.parser({
createPolygon: mapDrawingToType(),
map: map,
processStyles: true,
zoom: false,
singleInfoWindow: true,
});
mapDrawingToType = function() {
return function(placemark, doc) {
var polygon = geoXML3.instances[geoXML3.instances.length-1].createPolygon(placemark, doc);
if(polygon.infoWindow) {
polygon.infoWindowOptions.content = districtInfoMap[doc.baseUrl];
}
return polygon;
}
}
Here I have made one object containing the map of district url and window content you have to show.
This will overwrite the default behavior of how your infowindow is displayed and the desired content you want to show will be displayed.
If you still face any issue please do let me know.
I am trying to add a map to my website, but I would like to have it show the business view by default rather than going from satellite to street view and then to business view.
Is this possible?
If business view is what is now called indoor map, once you reach the view you should like to show on a map, you could simply retrieve the link to the view or to the iframe embed code, as explained in https://support.google.com/maps/answer/144361?hl=en
indoor map example: https://goo.gl/maps/SAhHg5hhLrGdLjaJ9
However, embedding the map via iframe source code gives you limited chances of customization.
If you need a higher level of customization you can use the street view service of Maps Javascript API (you will need an API KEY )
example: http://jsfiddle.net/eg561mx8/
var lat2 = 48.87708978509529, lng2 = 2.3392088036591754;
var map;
var panorama;
var panoramaService;
var streetView;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 14,
center: new google.maps.LatLng(lat2, lng2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
streetView = map.getStreetView();
panoramaService = new google.maps.StreetViewService();
panoramaService.getPanoramaByLocation(
new google.maps.LatLng(lat2, lng2),
100,
function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus != "OK") {
alert("no street view at this location I'm afraid");
} else {
streetView.setPosition(
streetViewPanoramaData.location.latLng);
streetView.setVisible(true);
}
}
);
}
I am using GMaps.js and I have several points to show, I need to show all and set the zoom to the point, I was watching the documentation and requests an array of google.maps.LatLng type. I have the following code
for (x in geo){
var item = new google.maps.LatLng(geo[x]["latitud"], geo[x]["longitud"]);
arrayBound.push(item);
}
map = new GMaps({
div: '#divMapa',
lat: latWS,
lng: lngWS,
zoom: 13
});
map.fitBounds(arrayBound);
I didn't find the solution obvious, but, here is an example that works with v0.4.11:
var latlngs = [{lat:"39.158542", lng:"-84.423903"}, {lat:"39.4339357", lng:"-84.9850474"}];
var bounds = [];
for (var i in latlngs) {
var latlng = new google.maps.LatLng(latlngs[i].lat, latlngs[i].lng);
bounds.push(latlng);
map.addMarker({
lat: latlngs[i].lat,
lng: latlngs[i].lng
});
}
map.fitLatLngBounds(bounds);
Rename fitBounds to fitLatLngBounds.
How to show marker? if it already exists in Google map. Link with marker http://maps.google.com/maps?&z=10&q=36.26577+-92.54324&ll=36.26577+-92.54324
and my function for initialization
function initialize() {
var latlng = new google.maps.LatLng(36.26577, -92.54324);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'map': map,
'title': 'set map in option'
});
or
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'title': 'set map later'
});
yourMarker.setMap(map)
Perhaps, what you seek can be done with the Places Api
http://code.google.com/apis/maps/documentation/places/
There are, however, some limitations on the number of requests per hour, per user.
In short: you search a particular LatLng point for nearby places. Then you receive a json (or xml) list of places, wich in turn can be transformed (by you) into markers on your map.