Add new Google Maps marker onClick in existing map - google-maps

Question

I got an existing map on my page with markers generated by PHP from a database. Works fine. Now I would like to add a new marker in this map.
I can't get it working:
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.2193835,6.5665018),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("geo.php?gmt=<? echo $stringGMT;?>&cat=<? echo $stringAAN;?>&abo=<? echo $stringABO;?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var markersskg=[];
create markers code: working
var icon = customIcons["bar"] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
function addmarker(lat,lon) {
var myLatLng = {lat: lat, lng: lon};
var marker;
//create a marker
marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true
});
}
and the onclick to call:
<div id="map" style="width: 100%; height: 600px"></div>
<button id="button" onClick="addmarker(53.0241066,6.571086);">Drop Markers</button>

Answer 1

You declare var map in load function and then is not visible in addMarker function
try declaring var map in global scope
var map ;
var customIcons = {
skg: {
icon: 'http://mywebsite.nl/img/logo_transparant24.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.2193835,6.5665018),
zoom: 10,
mapTypeId: 'roadmap'
});