|
<!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" xmlns:v="urn:schemas-microsoft-com:vml"> |
|
<head> |
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> |
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> |
|
<title>Google Maps Javascript API v3 Example: Add Marker with open infowindow on map click</title> |
|
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> |
|
<script type="text/javascript" src="http://www.geocodezip.com/scripts/downloadxml.js"></script> |
|
<style type="text/css"> |
|
html, body { height: 100%; } |
|
</style> |
|
<script type="text/javascript"> |
|
//<![CDATA[ |
|
|
|
// global "map" variable |
|
var map = null; |
|
var marker = null; |
|
|
|
var infowindow = new google.maps.InfoWindow( |
|
{ |
|
size: new google.maps.Size(150,50) |
|
}); |
|
|
|
// A function to create the marker and set up the event window function |
|
function createMarker(latlng, name, html) { |
|
var contentString = html; |
|
var marker = new google.maps.Marker({ |
|
position: latlng, |
|
map: map, |
|
zIndex: Math.round(latlng.lat()*-100000)<<5 |
|
}); |
|
|
|
google.maps.event.addListener(marker, 'click', function() { |
|
infowindow.setContent(contentString); |
|
infowindow.open(map,marker); |
|
}); |
|
google.maps.event.trigger(marker, 'click'); |
|
return marker; |
|
} |
|
|
|
|
|
|
|
function initialize() { |
|
// create the map |
|
var myOptions = { |
|
zoom: 8, |
|
center: new google.maps.LatLng(43.907787,-79.359741), |
|
mapTypeControl: true, |
|
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, |
|
navigationControl: true, |
|
mapTypeId: google.maps.MapTypeId.ROADMAP |
|
} |
|
map = new google.maps.Map(document.getElementById("map_canvas"), |
|
myOptions); |
|
|
|
google.maps.event.addListener(map, 'click', function() { |
|
infowindow.close(); |
|
}); |
|
|
|
google.maps.event.addListener(map, 'click', function(event) { |
|
//call function to create marker |
|
if (marker) { |
|
marker.setMap(null); |
|
marker = null; |
|
} |
|
marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng); |
|
}); |
|
|
|
} |
|
|
|
|
|
//]]> |
|
</script> |
|
|
|
</head> |
|
<body style="margin:0px; padding:0px;" onload="initialize()"> |
|
|
|
|
|
<table border="1"> |
|
<tr> |
|
<td> |
|
<div id="map_canvas" style="width: 550px; height: 450px"></div> |
|
</td> |
|
<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> |
|
<div id="side_bar"></div> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
<noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> |
|
However, it seems JavaScript is either disabled or not supported by your browser. |
|
To view Google Maps, enable JavaScript by changing your browser options, and then |
|
try again.</p> |
|
</noscript> |
|
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> |
|
</script> |
|
<script type="text/javascript"> |
|
_uacct = "UA-162157-1"; |
|
urchinTracker(); |
|
</script> |
|
<script type="text/javascript"><!-- |
|
google_ad_client = "pub-8586773609818529"; |
|
google_ad_width = 728; |
|
google_ad_height = 90; |
|
google_ad_format = "728x90_as"; |
|
google_ad_type = "text"; |
|
google_ad_channel =""; |
|
google_color_border = "CCCCCC"; |
|
google_color_bg = "FFFFFF"; |
|
google_color_link = "000000"; |
|
google_color_url = "666666"; |
|
google_color_text = "333333"; |
|
//--></script> |
|
<script type="text/javascript" |
|
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> |
|
</script> |
|
<div id="w3valid"> |
|
<a href="http://validator.w3.org/check?uri=referer" ><img |
|
src="http://www.w3.org/Icons/valid-xhtml10" |
|
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> |
|
</div> |
|
</body> |
|
</html> |
|
구글지도 좌표 찾기
