We Keep Coding

Overwrite google.map with location

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);

Add click event to markers from a loaded KML

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.

Google map js api version 3 infowindow glitch

I am developing an application which uses google maps api v3 to show markers and infowindows.
Well, I have N markers stored within an array and a global infowindow used to show some information.
The infowindow contents are shown simply by clicking a marker, created in this way:
/* global js stuff */
var g_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var g_current_popup = new google.maps.InfoWindow({ content: "" });
var g_markers = [];
/* create marker function */
function addMarker(p_infowindow_contents)
{
var l_marker = new google.maps.Marker( all the stuff needed );
google.maps.event.addListener(l_marker, 'click', function()
{
g_current_popup.close(); // if already open, it must be closed and reloaded
g_current_popup.setContent(p_infowindow_contents);
g_current_popup.open(g_map, l_marker);
});
g_markers.push(l_marker);
}
Everything works as expected, except for a little graphical glitch: when the infowindow is appearing, I see the infowindow 'tip' positioned at an unknown location for a tenth of a second, then it disappears and I see the correct infowindow.
Look at this screenshot took just before the tip disappears:
Does anyone experienced something like this?
Could it be some CSS issue?
Thanks

It does not look like this is a problem with your code, I think it more likely a browser issue. I was able to validate the same thing looking at the infowindow example that Google provides in Firefox, but not in Chrome:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
it seems to happen more visibly when the map has to scroll to fit the infowindow, but I would say that it is not a requirement for it to do so. It is likely just an artifact with the screen taking a few clock cycles to catch up with the DOM.

Improper google map display

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.

Google Maps JS API v3 not functioning properly (can right click, can't drag/zoom, logo at top...)

thanks for reading.
I've been using the JS version of the Maps v3 API and I can get Geocoding/Directions/Map Markers and all that going but for some reason on this particular map I want in the sidebar of my client's site, the map seems to not load properly.
I've reverted the JS to the simple sample code on the API documentation and even then, it's still not working. (For my screenshot I added 'disableDefaultUI: true' for mapOptions)
I can't mousewheel scroll to zoom.
I can't click and drag with the mouse.
The logo and fine print are showing at the top (usually at the
bottom)
I can right click and see a context menu (not normal).
I just don't know why the map won't work on this particular page. Is the map_canvas dimensions too small or something? (231px x 231px).
Have you seen or heard of this issue before?

Check if you have the console open, as it can break the map.
When testing, keep the console closed to see results and reopen it, the refresh to see logs.
This sucks, but it is better than pulling your hair out for no reason.

try this code may be help this..
<script language="javascript" type="text/javascript">
var geocoder;
var map;
$(document).ready(function() {
initialize();
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
html
<div id="map_canvas">
</div>