How to add markers to google map dynamically? - google-maps

Question

With the first script I create the map and add a marker to it with the second script (which does not work). I need to add the markers with a separate script because the marker data is retreived from my database. The query loops through records and provides the script with name and coordinates for markers. I know the problem is about the variable "map". If I move the marker script to within first script, it works. Can someone help me with this please?
<script type="text/javascript">
var map;
function GoogleLoadMap() {
var latLng = new google.maps.LatLng(35.337186, 33.337439);
var homeLatLng = new google.maps.LatLng(35.314246, 33.389347);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
</script>
<script type="text/javascript">
var marker<%=iii%> = new MarkerWithLabel({
position: new google.maps.LatLng(<%=lat%>, <%=lon%>),
draggable: true,
map: map,
labelContent: "<%=HNAME%>",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
var iw<%=iii%> = new google.maps.InfoWindow({
content: "<%=HNAME%>"
});
google.maps.event.addListener(marker<%=iii%>, "click", function (e) {
iw<%=iii%>.open(map, marker<%=iii%>); });
</script>

Answer 1

It is a timing problem. The map, which is initialized in the GoogleLoadMap() function (which I assume is run on the window load event, but you don't provide that code), is initialized after you create all your markers. You need to either initialize your markers after the map is initialized (inside the GoogleLoadMap function), or call the .setMap method on all the markers after initializing the map.