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);
Related
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 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.
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.
Is there an easy way to get access to the objects/properties of the markers and infowindows created by the DirectionsRenderer? (i.e. the "A" and "B" endpoints of the route)
I'm looking to replace the "A" & "B" markers' infowindows with one that I've created (containing dynamic content) from another "non-route" marker.
I've tried to copy the content from the previous infowindow into the new "route one" like this below, but it doesn't render properly (too many ancestor div & styling constraints).
//infowin is a reference to the infowindow attached to the marker
result.routes[0].legs[0].end_address = MarkersArray[i].infowin.getContent();
Thanks,
E
I try to solve the same problem. I dont't found any method to get the standart start or end icon.
You can disable the icons for the route and set a coustom marker.
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});