I'm creating a view with a google map in it when a certain click from a li element event is triggered.
For the first time the map is shown ok. And the result is this:
http://postimg.org/image/eolnn0411/
but when I click in another li element to create a new map it is shown like this:
http://postimg.org/image/576um203l/
I've noticed a strange behavior that if I resize the browser window the map turns to display ok after that.
I'm using the following code:
var latlng = new google.maps.LatLng(coordinates[0], coordinates[1]);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map;
map = new google.maps.Map(node, myOptions);
var marker = new google.maps.Marker({
map: map,
position: latlng
});
Edit:
Related posts here, and here.
Edit 2: By using the workaround of using setInterval() works sometimes. SO it seems that the problem is the map not being ready for the event.
Try to trigger Google maps(v3) resize event.
google.maps.event.trigger(map, 'resize');
This fiddle will help you to find the difference.
Related
I have a main javascript file which generates a google map inside a div. This div is under many others which contains graphically visible datas needs for... somethgin similar to a dashboard. But on several other subpages I want to dynamically reload the map with unique parameters, but I can't according to the main map is listened on the load event. Not used the google map v3 api so much times so could anyone help me?
The main is generated by:
function mapInitialize() {
var mapOptions = {
zoom: 13,
styles: mapStyle
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', mapInitialize);
In one of my subpage I want to generate a map with specific center, coordinates and a unique marker. So what I basically would do is to cal lagain the whole initialize() with my specific attributes, but it generates itself firstly then the one in main.js overwrite this already generated and wrong one :( How could I manage this easily, according to there are several subpages which should show this kind of unique datas after the page is fully loaded?
Google maps allows you to recenter the map after a map is already initialized:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
title: markerTitle,
map: map,
});
map.panTo(marker.getPosition());
Additionally, what keeps you from reinitializing the map whenever you want? Just because it is registered with an on load listener shouldn't prevent you from making new instances? (I think):
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
I'm loading a KML to my google maps. With this functions the maps loads correctly with the markers on the kml
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(12.136389, -86.251389),
zoom: 11
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://mobilenicode-001-site1.smarterasp.net/Content/Prueba.css'
});
ctaLayer.setMap(map);
}
The problem is that i'm trying to add a "addListener" events to the markers that comes from the KML. How can I achieve that?
You can't. Google renders the KML server side and overlays it in your map with their given behavior and elements as a whole. While it's true that you can set a few options for the KML layer, you can't address particular elements inside of it.
Depending on your backend, if you have one, you could parse a KML file. (Markers should appear inside a <PlaceMark> tag, but your mileage may vary) and draw the markers yourself.
Add a click listener to the KmlLayer (as described in the documentation):
var ctaLayer = new google.maps.KmlLayer({
url: 'http://mobilenicode-001-site1.smarterasp.net/Content/Prueba.css'
});
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer,'click',function(evt) {
alert("marker clicked");
});
working fiddle
Note that the only mouse event that KmlLayers support is the "click" event.
I'm using Google Maps API v=3 (was using v=2, same problem). I have tried latest Chrome, latest Firefox, latest IE11. I am able to display a map and pan to a new center, but I cannot get a Marker to display. Here are script headers:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"
type="text/javascript">
</script>
<!-- Load Google Maps Javascript API -->
<script src="http://maps.google.com/maps?file=api&v=3"
type="text/javascript">
</script>
And when user clicks on a particular location in a table, the following function is invoked. There is a map on the page, and the map pans to the new location, but the Marker never appears.
function setMapCenter(map, latitude, longitude)
{
var center = new google.maps.LatLng( latitude, longitude );
map.panTo(center);
var marker = new google.maps.Marker({position: center,map: map,title: 'HERE'});
}
Does anyone see a problem here? Thanks.
I have made a pretty simple page that exhibits the problem. Load the page, click on any of the lat-long links and see the map pan to new location - but no marker is displayed. Here it is: http://www.glenn-nelson.us/marker.html
The solution is both an updated Google Maps API specification and a different syntax for initial map creation. My sample link has been updated to show the working version.
GOOD:
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript">
</script>
function initialize() {
var center = new google.maps.LatLng(37.3000, -122.0000);
mymap = new google.maps.Map(document.getElementById("map_div"),
{zoom: 11,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({position: center,map: mymap,title: 'HERE'});
}
Here's the BAD code I started with:
<script src="http://maps.google.com/maps?file=api&v=3"
type="text/javascript">
</script>
function initialize() {
var center = new google.maps.LatLng(37.3000, -122.0000);
mymap = new google.maps.Map(document.getElementById("map_div"));
mymap.setCenter(center, 11);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
marker = new google.maps.Marker({position: center,map: mymap,title: 'HERE'});
}
Although this could generate a map and calls to map.setCenter() or map.panTo() would work, it was unable to display any markers. Furthermore, when I changed the API script to the new format "http://maps.google.com/maps/api/js?sensor=false", my map DIV then went solid gray. And new API script format with the old initialize function also gave me gray.
So, old API designation with older map construction is OK, but markers simply don't display.
New API designation with new map construction also allows me to see markers.
I have an issue that I couldn't find a solution yet, the google map works the first time I call the page (Single Page App) but than when I go back and forth the map and the markers are right but happen something like happened to this user :
1. centered erringly.
2. missing an entire area covered in grey.
Why is the centering of my map off in my jQuery Mobile / Google Maps API3 application?
as you can see in the previous post the map is in the corner a bit smaller exactly what happen to me.
Now I show you what I have and what I have tried to solve the issue.
Here it is the code that call the #page-map, in the content of another page called #ListOfPlaces
<a href="#page-map" data-role="button" data-inline="true" onClick="javascript:SetCoordinate('Place1');" >Show Map</a> </p>
With this javascript:SetCoordinate function I set different Lon. and Lat. that than I use in the function below center: myLatlng,
Here my includes in the Index.html
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery-mobile/jquery.ui.map.js"></script>
Here it is my code that shows the map that works fine just the first time:
<script type="text/javascript" >
//funziona ma senza marker
$(document).on('pageshow', '#page-map', function() {
var myLatlng = new google.maps.LatLng(sLat, sLon);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#map_canvas').fadeOut(300, function(){
var infowindow = new google.maps.InfoWindow({
content: sHTMLPlace
});
var map= new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Here is the place'
});
//google.maps.event.trigger(map, 'resize')
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker
);
});
marker.setMap(map);
$(this).fadeIn(300);
});
});
</script>
According to the documentation I should resize the map once I've created it to solve this specific issue, but it doesn't solve it.
I noticed though, that when I go back with the browser or with the back button and I reload the page (F5) if I click on the link (show map) the map starts to work again, or when I am on the map that it is not showed correctly and I go into the Chrome Web Developer console the map refresh and works fine.
Another thing that I've tried is to simulate the F5 on the "#ListOfPlaces" with the following code
function refreshPage()
{
jQuery.mobile.changePage(window.location.href, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
}
it doesn't help either. Any suggestion or documentation is accepted, thank you in advance for your help.
I readed many question, map help, product forums and so on... but I never find the answer just this "It is not possible". I can't believe it.
So how can I set the default zoom level on an embed Google Map?
Now I have this link for my map: https://mapsengine.google.com/map/edit?mid=zV4QqQ0y5KZs.kFj05lIIpS5s
I was tried thi z=10 parameter in the URL, it doesn't work. Is there any other parameter, or maybe something JavaScript tricks to set up the zoomlevel? Or something other HTML parameter like data-zoom or something...?
It seems the &z=nn parameter now works.
Try this:
https://mapsengine.google.com/map/viewer?mid=zV4QqQ0y5KZs.kFj05lIIpS5s&z=10
I use this code to initialize my map:
var map;
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(40, -3),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
That's centered in Spain.
The new embedded google maps do not have the Z index more, you have to first set the zoom level you want on the google maps site, and afther that click on the setting button and get the iframe code for the zoomed map.
You can not change the zoom level in the setting window, that is why you have to zoom the map first directly in the google maps.
Than paste this code in your html page and it should work, at least this worked for me.