Forum
Notifications
Clear all
Topic starter
Google Map API is an interface for you to put maps on your webpage. It also can be used as an input method for a user to select his address exactly on a map. So, the user does not only type in his address, city, country and other location information as we can found generally on ordinary submit forms. They mark their exact address on the map. Sounds great, isn’t it? Google map API is generally used in real estates websites to provide a more informative and readable detail.
<html>
<head>
<title>Google Maps API Example</title>
<script
src="" http://maps.google.com/maps?file=api&v=1&key=<you r" api key>"
type="text/javascript">
</script>
<!--
<your api key> is a unique key provided by google map
You have to replace <your api key> with your api key
You can get your API key at
http://code.google.com/apis/maps/signup.html
-->
</head>
<body>
<div id="map" style="width:400px;height:400px"></div>
To move the marker, you may perform a single right click
on a new location.
<script language="JavaScript">
//By : Xhanch Studio
//URL : http://xhanch.com/
var map;
// Define default marker location
var default_longitute = "-122.141944";
var default_latitute = "37.441944";
// Marker/Pointer moved handler
function move_marker(latlng){
if(latlng){
//Get the selected corrdinate
lng = latlng.lng();
lat = latlng.lat();
//Remove all markers
map.clearOverlays();
//Set new marker
var point = new GPoint(lng, lat);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
// Google Map initialize
if (GBrowserIsCompatible()) {
map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//Set default marker, the zoom we set to 7
var point = new GPoint(default_longitute, default_latitute);
map.centerAndZoom(point,7);
var marker = new GMarker(point);
map.addOverlay(marker);
// Assign a single right click event handle
GEvent.addListener(map, "singlerightclick", function(point){
var latlng = map.fromContainerPixelToLatLng(point);
move_marker(latlng);
});
}
</script>
</body>
</html>
Demo: http://xhanch.com/javascript-google-maps-with-pointer/
Source: http://xhanch.com/javascript-google-maps-with-pointer/
Posted : 02/03/2011 11:59 pm