Too make thing easier an InfoWindow (Bubble, Text Balloon) will show above the marker to show the current coordinates of the marker.
For this I will use Google Maps API v3.
Here is a demo of the final result:
First create a default map to make sure everything works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.086257, 5.108642);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:640px; height:480px"></div>
</body>
</html>
This will create a default Google Map on your website. You can change the coordinates in this line 'var latlng = new google.maps.LatLng(52.086257, 5.108642);' to center on an other part of the world:
Now we will create a marker on the map. We want to drag the marker around. To do so, add 'draggable: true' to the marker options. The position of the marker will be the center of the map, so just use the the already created JavaScript variable 'latlng' for the marker.
Insert the following code right after 'var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);' :
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true
});
Save your file and reload the page:
Try to move the maker around.
Now we will create an InfoWindow. This InfoWindow will be placed above the marker and will show the current coordinates of the marker.
To create an InfoWindow, add the following code right after 'var marker = new google.maps.Marker({position: latlng, map: map, draggable: true});' :
var infowindow = new google.maps.InfoWindow({
content: marker.getPosition().lat().toFixed(6) + ' , ' + marker.getPosition().lng().toFixed(6)
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
Reload your webpage. Click on the marker. An InfoWindow appears with the current coordinates of the marker:
Let me explain the code:
'var infowindow = new google.maps.InfoWindow' created a new instance of an InfoWindow. An InfoWindow has different properties. One of those properties is 'content'. This can be HTML and plain text. This will be shown in the InfoWindow.
The following code 'content: marker.getPosition().lat().toFixed(6) + ' , ' + marker.getPosition().lng().toFixed(6)' will display the latitude and longitude coordinates of the marker.
'marker.getPosition()' will return a LatLng variable, 'marker.getPosition().lat()' will only return the latitude value.
'marker.getPosition().lat().toFixed(6)' will return the latitude coordinate with only 6 decimals.
We will do the same for the longitude value. We bind those two values together with '+ ' , ' +'.
Try to drag around the marker with the InfoWindow visible. You will see that the coordinates will not be updated. To do so, we have the create a drag event. When you release the mouse button and the marker is placed, the coordinates must be updated.
Add the following code after 'google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); });' :
google.maps.event.addListener(marker, "dragstart", function() {
infowindow.close();
});
google.maps.event.addListener(marker, "dragend", function() {
infowindow = new google.maps.InfoWindow({content: marker.getPosition().lat().toFixed(6) + ' , ' + marker.getPosition().lng().toFixed(6)});
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
Reload your webpage, click on the marker and drag it around. The InfoWindow will be closed when dragging the marker around. When the mouse button is released, the InfoWindow will be opened and the new coordinates will be shown. The map will be centered on the marker again.The event 'dragstart' will happen when you drag the marker across the map. When dragging, the InfoWindow will be closed (infowindow.open(map, marker);).
When the mouse button is released the event 'dragend' starts. First the InfoWindow will be updated with the new coordinates. After that, the map will be centered on the marker position (map.setCenter(marker.getPosition()); When this is completed, the InfoWindow will be opened again:
Optionally you can add the following lines of code:
google.maps.event.addListener(marker, "dblclick", function() {
map.setZoom(14);
});
google.maps.event.trigger(marker, "click");
Reload your webpage. Double click on the marker will zoom in on the map and the InfoWindow is automatically opened when you visit the webpage (google.maps.event.trigger(marker, "click");).The whole source code of the webpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.086257, 5.108642);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true
});
var infowindow = new google.maps.InfoWindow({
content: marker.getPosition().lat().toFixed(6) + ' , ' + marker.getPosition().lng().toFixed(6)
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "dragstart", function() {
infowindow.close();
});
google.maps.event.addListener(marker, "dragend", function() {
infowindow = new google.maps.InfoWindow({content: marker.getPosition().lat().toFixed(6) + ' , ' + marker.getPosition().lng().toFixed(6)});
map.setCenter(marker.getPosition());
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "dblclick", function() {
map.setZoom(14);
});
google.maps.event.trigger(marker, "click");
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:640px; height:480px"></div>
</body>
</html>
Good luck.
Thank you. Worked perfectly for me. I have been looking everywhere for a well explained answer like this.
ReplyDelete