Forum Moderators: open
var point;
if (!mapdiv) return true;
//find the div
var map = new GMap2(document.getElementById(mapdiv));
//this will add a map overview in the bottom
//right hand corner
//map.addControl(new GOverviewMapControl());
//enable the zooming
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
//call the function that adds the menu
//when the user right clics
createContextMenu(map);
//add the different map types i.e. satellite street hybrid
map.addControl(new GMapTypeControl());
//add the zoom + and - buttons
map.addControl(new GSmallMapControl());
//a couple markers
var marker1 = new GMarker(new GLatLng(40.7001, -99.09));
var marker2 = new GMarker(new GLatLng(40.7001, -99.07));
//var marker3 = new GMarker(new GLatLng(40.705, -99.11));
//these add marker 1 or 2 to the box when you click on the
//marker
GEvent.addListener(marker1, "click", function() {
marker1.openInfoWindowHtml("marker 1");
});
GEvent.addListener(marker2, "click", function() {
marker2.openInfoWindowHtml("marker 2");
});
//add the markers to the page
map.addOverlay(marker1);
map.addOverlay(marker2);
//map.addOverlay(marker3);
//set the center, position, and type of map to start with
map.setCenter(new GLatLng(40.7001, -99.0844), 15);
map.setMapType(G_NORMAL_MAP);
//if we wanted to draw a polyline we would uncomment this code
//var polyline = new GPolyline([new GLatLng(37.4419, -122.1419),
//new GLatLng(37.4519, -122.1519),
//new GLatLng(37.4619, -122.1819)], "#3333cc", 10);
//map.addOverlay(polyline);
} //if gbrowseriscompatible
else {
document.getElementById(mapdiv).innerHTML = "Sorry, your browser is not compatible" +
"with our maps application<br>" +
"Please try updating to a newer version of your browser.";
}
} //loadEarth
function addUserMarker(lat, lon, desc, mapdiv) {
//find the div
var map = new GMap2(document.getElementById(mapdiv));
//create the new marker
var tempMarker = new GMarker(new GLatLng(lat, lon));
//add the description popup box
GEvent.addListener(tempMarker, "click", function() {
tempMarker.openInfoWindowHtml(desc);
});
map.addOverlay(tempMarker);
map.refresh();
} //addUserMarker
I think my problem is I don't know how to share my map object between the two functions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>gmap2 demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true" type="text/javascript"></script>
<script type="text/javascript">function loadEarth(mapdiv) { //mapdiv should be a html DOM object
if (!GBrowserIsCompatible()) {
var msg = "Sorry, your browser is not compatible with our maps application";
msg += "<br>Please try updating to a newer version of your browser.";
mapdiv.innerHTML = msg;
return null;
}
if (!mapdiv) {return null;}
//initiate our global map variable to a new instance of GMap2
map = new GMap2(mapdiv);
//this will add a map overview in the bottom right hand corner
//map.addControl(new GOverviewMapControl());
//enable the zooming
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
//call the function that adds the menu when the user right clicks
//createContextMenu(map);
//add the different map types i.e. satellite street hybrid
map.addControl(new GMapTypeControl());
//add the zoom + and - buttons
map.addControl(new GSmallMapControl());
//a couple markers
var marker1 = new GMarker(new GLatLng(40.7001, -99.09));
var marker2 = new GMarker(new GLatLng(40.7001, -99.07));
//var marker3 = new GMarker(new GLatLng(40.705, -99.11));
//these add marker 1 or 2 to the box when you click on the marker
GEvent.addListener(marker1, "click", function() {
marker1.openInfoWindowHtml("marker 1");
});
GEvent.addListener(marker2, "click", function() {
marker2.openInfoWindowHtml("marker 2");
});
//add the markers to the page
map.addOverlay(marker1);
map.addOverlay(marker2);
//map.addOverlay(marker3);
//set the center, position, and type of map to start with
map.setCenter(new GLatLng(40.7001, -99.0844), 14);
map.setMapType(G_NORMAL_MAP);
}function addUserMarker(lat, lon, desc, g_mapObject) { //enable use with other maps by passing map as an object for g_mapObject
if (g_mapObject instanceof GMap2) { //the passed in mapObject is a valid map object
//create the new marker
var tempMarker = new GMarker(new GLatLng(lat, lon));
//add the description popup box
GEvent.addListener(tempMarker, "click", function() {
tempMarker.openInfoWindowHtml(desc);
});
g_mapObject.addOverlay(tempMarker);
}
}var map; //global 'map' variable, will be instantiated as a GMap2 object from loadEarth in the window.onload event
window.onload = function () {
loadEarth(document.getElementById("map_canvas1")); //I'm a big fan of passing the DOM object, rather than it's id
};</script>
</head>
<body>
<div>
<div id="map_canvas1" style="width:500px; height:300px;"></div>
<div>
<a href="#" onclick="addUserMarker(40.705, -99.0844,'added marker A', map); return false;">add marker A</a><br>
<a href="#" onclick="addUserMarker(40.695, -99.0844,'added marker B', map); return false;">add marker B</a>
</div>
</div>
</body>
</html>
