How to add multiple markers in Google Earth/Maps
2,020 views
Skip to first unread message
Arron Rasmussen
Mar 10, 2011, 1:58:47 PM3/10/11
to KML Developer Support - Google Earth Plug-in
I am using the google maps + earth integration code, works great...
but want to be able to add a second marker... not sure how to do
that...
here is the code i am using:
------------
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?
key=ABQIAAAAETsHwZz8K7hGxxZbULT8ExSEDlw5BMI1_VdtT3U4EoEfygu42hQAwLMq7N0AAU-
_G-9d7SUP8fxwMw" type="text/javascript"></script>
<script type="text/javascript">
var map;
var ge;
google.load("maps", "2.x");
function init() {
map = new GMap2(document.getElementById('map3d'));
map.setCenter(new GLatLng(49.485691,-119.563093), 12);
var mapui = map.getDefaultUI();
mapui.maptypes.physical = false;
map.setUI(mapui);
// add 'Earth' as one of the map types
map.addMapType(G_SATELLITE_3D_MAP);
// create a marker
var marker = new GMarker(new GLatLng(49.485691,-119.563093));
GEvent.addListener(marker, "click", function() { var html = '<div
style="width: 210px; padding-right: 10px">Hello world!</div>';
marker.openInfoWindowHtml(html); });
var marker = new GMarker(new GLatLng(49.486639,-119.562578));
GEvent.addListener(marker, "click2", function() { var html = '<div
style="width: 210px; padding-right: 10px">hi world!</div>';
marker.openInfoWindowHtml(html); });
map.addOverlay(marker);
google.maps.Event.trigger(marker, "click");
map.addOverlay(marker);
google.maps.Event.trigger(marker, "click2");
// do stuff with Earth when the user switches to it
GEvent.addListener(map, 'maptypechanged', function() {
if (ge)
return;
map.getEarthInstance(function(pluginInstance) {
ge = pluginInstance;
doStuffWithEarth();
});
});
}
function doStuffWithEarth() {
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-
size: 13px; border: 0;">
<div id="map3d" style="width: 900px; height: 800px;"></div>
<br>
<div>Installed Plugin Version: <span id="installed-plugin-version"
style="font-weight: bold;">Loading...</span></div>
</body>
</html>
---------------
but want to be able to add a second marker... not sure how to do
that...
here is the code i am using:
------------
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?
key=ABQIAAAAETsHwZz8K7hGxxZbULT8ExSEDlw5BMI1_VdtT3U4EoEfygu42hQAwLMq7N0AAU-
_G-9d7SUP8fxwMw" type="text/javascript"></script>
<script type="text/javascript">
var map;
var ge;
google.load("maps", "2.x");
function init() {
map = new GMap2(document.getElementById('map3d'));
map.setCenter(new GLatLng(49.485691,-119.563093), 12);
var mapui = map.getDefaultUI();
mapui.maptypes.physical = false;
map.setUI(mapui);
// add 'Earth' as one of the map types
map.addMapType(G_SATELLITE_3D_MAP);
// create a marker
var marker = new GMarker(new GLatLng(49.485691,-119.563093));
GEvent.addListener(marker, "click", function() { var html = '<div
style="width: 210px; padding-right: 10px">Hello world!</div>';
marker.openInfoWindowHtml(html); });
var marker = new GMarker(new GLatLng(49.486639,-119.562578));
GEvent.addListener(marker, "click2", function() { var html = '<div
style="width: 210px; padding-right: 10px">hi world!</div>';
marker.openInfoWindowHtml(html); });
map.addOverlay(marker);
google.maps.Event.trigger(marker, "click");
map.addOverlay(marker);
google.maps.Event.trigger(marker, "click2");
// do stuff with Earth when the user switches to it
GEvent.addListener(map, 'maptypechanged', function() {
if (ge)
return;
map.getEarthInstance(function(pluginInstance) {
ge = pluginInstance;
doStuffWithEarth();
});
});
}
function doStuffWithEarth() {
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-
size: 13px; border: 0;">
<div id="map3d" style="width: 900px; height: 800px;"></div>
<br>
<div>Installed Plugin Version: <span id="installed-plugin-version"
style="font-weight: bold;">Loading...</span></div>
</body>
</html>
---------------
fraser (Earth API Guru)
Mar 13, 2011, 1:19:32 AM3/13/11
to KML Developer Support - Google Earth Plug-in
Hi,
There are lots of ways, using the code you posted as an example.
look at the comment that says:
// create a marker
...right after it is the code you need (if I remove the event stuff it
is easier to see..)
var marker = new GMarker(new GLatLng(49.486639,-119.562578)); //
latitude, longitude
map.addOverlay(marker);
See this reference for more info on the v2 marker object.
http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html#Markers
F.
There are lots of ways, using the code you posted as an example.
look at the comment that says:
// create a marker
...right after it is the code you need (if I remove the event stuff it
is easier to see..)
var marker = new GMarker(new GLatLng(49.486639,-119.562578)); //
latitude, longitude
map.addOverlay(marker);
See this reference for more info on the v2 marker object.
http://code.google.com/apis/maps/documentation/javascript/v2/overlays.html#Markers
F.
Reply all
Reply to author
Forward
0 new messages