I can't get my map to zoom in, I tried to edit the zoom property with in the options object, like the normal google maps API but it doesn't work. Any ideas?
Yes, it´s possible.
For example using zoom attribute as follows:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
Related
I am playing with writing a little javascript solution that would take place on mars. I would love to have the output result in a google map of a lat and long on Mars. Any thoughts? Can the following concept BE called for a location on the red planet?
`map = new google.maps.Map();`
I see stuff in the API that indicates this at lease WAS doable in v.2, but I don't know if that survived, and can't seem to scare anything relevant up to tell me if this is a possibility or a dead end.
For Earth, this looks straight forward enough.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var markerTest = {lat: -34.397, lng: 150.644};
var marker = new google.maps.Marker({
position: markerTest,
map: map
});
}
Here's an Fiddle example: https://jsfiddle.net/chakra5/qx3r12xk/
Many thanks in advance for any and all brainstorming.
I am using the Gmap API to display a Google Map with a transitLayer. I am trying to improve the PageSpeed of my website. One of the things that would help is if I could load the transitLayer AFTER the Google Map is initialized. I have created a fiddle in which the Google Map is initialized with the transitLayer. Is it possible to add the transitLayer AFTER the google map is initialized?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}
I am not sure what do you mean saying AFTER the google map is initialized. I suppose you can use one of the events defined for the Map class, for example tilesloaded or idle.
https://developers.google.com/maps/documentation/javascript/reference#Map
So, the code might something like
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
google.maps.event.addListenerOnce(map, "idle", function() {
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
});
}
I am trying to zoom out of the google map,this is what happens:
How can I stop this kind of behaviour from occuring?
Include the minZoom property in your map options:
...
var mapOptions = {
minZoom: 2
}
map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
...
This will limit the amount that user will be able to zoom out, which will prevent the map from repeating.
More info: https://developers.google.com/maps/documentation/javascript/reference
Set maxZoom property for map .
var mapOptions = {
zoom: 11,
center: tokyo,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', showMaxZoom);
Look at here : https://developers.google.com/maps/documentation/javascript/maxzoom
I am working with the Google Maps KML layer click event.
I am using this code:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
alert(kmlEvent.featureData.name);
});
}
Sometimes alert(kmlEvent.featureData.name) shows a number but sometimes it's 'undefined'.
Sometimes obj.featuredData.id is null (ZERO_RESULTS status is in status field).
Re-created your code in a fiddle: http://jsfiddle.net/mdares/TAfys/
I cannot replicate the issue you are having. Can you provide an example given the above link of where it fails? Is this possibly browser specific? Finally - is there any additional code you haven't posted which might be the cause? My code is unchanged from yours as you posted, but I am curious if you are also doing other things:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function (kmlEvent) {
alert(kmlEvent.featureData.name);
});
}
I am retrieving longitude and latitude acording to users ip, then i want to just paint the map but it wont work
function initialize() {
console.log(geoip_latitude(), geoip_longitude());
var myLatlng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready(function(){
initialize();
});
Firebug logs
google.maps.LatLng is not a constructor
[Parar en este error]
var myLatlng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
Any idea why?
Please fiddle with it here http://jsfiddle.net/As3JQ/12/
The main code seems to be OK, I looked at your jsfiddle and all I did is add
html, body, #map_canvas { height: 100% }
to the CSS area and it works fine for me