Return address from marker - reverse

I'm very new to reverse geocoding. I have managed to place a dragable marker on a map which when dropped returns the Lat/Long to text boxes on a form using the code below:
div id="map" style="width: 600px; height: 467px"></div>
<script type="text/javascript" src="http://maps.google.com/maps?
file=api&v=2&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
<!--
if (GBrowserIsCompatible())
{
// create map and add controls
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
//map.enableGoogleBar();
// set centre point of map
var centrePoint = new GLatLng('53.767789993998804', '-2.7046966552734375');
map.setCenter(centrePoint, 10);
// add a draggable marker
var marker = new GMarker(centrePoint, {draggable: true});
map.addOverlay(marker);
// add a drag listener to the map
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("latitude").value = point.lat().toFixed(5);
document.getElementById("longitude").value = point.lng().toFixed(5);
});
}
</script>
This works fine but I would also like to capture the street name to a text box but am lost. I know I can't do it using 'point' and have to define a function but am completely lost and google searches have turned up nothing of use to someone starting out like me.
Any pointers would be appreciated.
Thanks

I reckon the answer is here:
http://code.google.com/apis/maps/documentation/javascript/services.html#ReverseGeocoding
But you'll need to upgrade to version 3 of Google Maps API.

Related

Google Map - Convert v2 to v3 -drag icon and retrieve lat/long

I have an application that I wrote years ago in Google Map v2 that displayed a map from a given initial lat/long and placed an icon on the map. This webpage was a form with a text box for the lat and long. The page allowed the user to drag the icon to actual location of where a wildfire was located. The new lat/long was placed into the text box and the user could submit the form. I have not found a suitable replacement in v3 for this process. And now I get an error message that a new API key is required from Google Maps. But I also know that in May that v2 may no longer work. So I would like to update this app to v3. Any ideas of where I can find this? Here is an example of the old page http://nfsdata.unl.edu/wildfire/testmap.asp The page is writen in ASP. And we do not have access to PHP on this server. Thanks
That is a very straightforward application.
Your v2 code:
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(41.33,-96.95);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: false});
map.addOverlay(marker);
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else {
map.clearOverlays()
map.addOverlay(new GMarker(point));
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
}
});
}
}
//]]>
</script>
Simple translation to v3 (not tested):
<script type="text/javascript">
//<![CDATA[
function load() {
var center = new google.maps.LatLng(41.33,-96.95);
map = new google.maps.Map(document.getElementById("map"),{
center:center,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position:center
});
google.maps.event.addListener(marker, "click", function() {
marker.setMap(null);
});
google.maps.event.addListener(map, "click", function(evt) {
var point = evt.latLng;
marker.setPosition(point);
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
});
}
}
//]]>
</script>
working example

Google Map API - update lat/long info

I am working on site updates for a company that includes adding a new Google Map for a new location.
I need to update the below code with new Longitude and Latitude co-ordinates, but don't know how to generate them based on the address.
<script type="text/javascript">
//<![CDATA[
function gmap_load() {
function createMarker(point, html, labeltext) {
var marker = new GMarker(point, {title:labeltext});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("googlemap"));
map.setCenter(new GLatLng(51.71,-1.96), 11);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
var point = new GLatLng(51.71448,-1.97357);
marker = createMarker(point,
"<div class=smalltext>David Lloyd,<br>Latham Road,<br>Blunsdon,<br>Swindon.<br>SN25 4DL</ div>", "Swindon clinic");
map.addOverlay(marker);
}
}
//]]>
</script>
Found this site that provides you with the data I needed: http://universimmedia.pagesperso-orange.fr/geo/loc.htm
Thanks

how to move from one pin to another in google map click event in html

i have displayed multiple pins in google map with infoWindows,and there location name displayed in html page, now i need this when click on any location name moving pins from one to another, and have show it's infoWindow.
so, is there any solution?
http://i53.tinypic.com/hvec15.jpg
Here is my code
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(51.50015, -0.12624), 13);
// Creates a marker at the given point
// Clicking the marker will hide it
var marker = new GMarker(new GLatLng(lat, longt));
map.addOverlay(marker);
function createMarker(latlng, number) {
var marker = new GMarker(latlng);
marker.value = number;
GEvent.addListener(marker,"click", function() {
var myHtml = number + "";
map.openInfoWindowHtml(latlng, myHtml);
});
return marker;
}
// Add 5 markers to the map at random locations
// Note that we don't add the secret message to the marker's instance data
var bounds = map.getBounds();
for (index in markers){
var n=markers[index];
var latlng = new GLatLng(n.lat,n.lng);
map.addOverlay(createMarker(latlng, n.name));
}
marker.openInfoWindowHtml(WINDOW_HTML);
}
}
hey i got it with google map_lib,
see demo: login to see demo

Map doesn't respond on mouse clicks with Google Maps API V3 and QWebView

EDIT 4
All this while I was thinking that it is the markers problem, that they do not get dragged!
Now I have realized, that NO mouse click works on the map when it is displayed in Qt widget.
The following code, I pasted in an HTML file and opened through Firefox, this worked flawlessly! and the same doesn't respond when I click on the map on QtWidget :rolleyes:
Can anyone confirm this for me or tell me what wrong I am doing?
Google Maps JavaScript API Example
<script type="text/javascript">
var map;
var latlng = new google.maps.LatLng (34.7607233, -117.0107599);
var directionsDisplay = new google.maps.DirectionsRenderer ();;
var directionsService = new google.maps.DirectionsService ();
var pointsArray = new Array();
var arrayToBeReturned = new Array();
function initialize ()
{
var myOptions =
{
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map (document.getElementById ("map"), myOptions);
directionsDisplay.setMap (map);
google.maps.event.addListener (map, "click", function ()
{
alert("You clicked the map.");
});
}
</script>
</head>
<body onload="initialize()" topmargin="0" leftmargin="0">
<div id="map" style="width: 341px; height: 271px"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</body>
</html>
You are looking at the wrong place for the events :) In the references each object have their own events. You can see the ones for markers here:
[http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker][1]
I have used the dragend event plenty of times and it works smoothly.
The code to do it could be:
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function () {
document.getElementById("txtLatitude").value = marker.getPosition().lat();
document.getElementById("txtLongitude").value = marker.getPosition().lng();
});
[1]: http://code.google.com/apis/maps/documentation/javascript/reference.html#Markermap = new
Found the solution:
Add this class in the source file where you are "loading" the HTML file (containing Javascript API) in the Qt widget.
class myWebPage : public QWebPage
{
virtual QString userAgentForUrl(const QUrl& url) const {
return "Chrome/1.0";
}
};
Then in your own class in the same source file, add the setPage function call as shown below and see the magic happen!
MainScreen::MainScreen(QWidget *parent):QWidget(parent)
{
...
***map->setPage (new myWebPage());***
map->load (QUrl("./index.html") ) ;
};
google.maps.event.addListener (initialPointMarker, 'click',
function () { map.closeInfoWindow(); });
How about single quotes around the click arguement

Google Maps API not centering the Marker

I have Google Maps on a website that sets the marker based on an address.
Here's an example (click the location tab): http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/
As you can see there is no marker on the map. But if you scroll upwards the marker is sitting just out of view.
Is there something wrong with my code? The weird thing is very few addresses actually show correctly but the majority don't. Is there something wrong with my code or is it Google?
Here is my JavaScript Code:
<script type="text/javascript">
$(document).ready(function(){
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
});
</script>
-
function load(title, address, type) {
if (GBrowserIsCompatible()) {
var map;
var geocoder;
map_id = document.getElementById("map");
map = new GMap2(map_id);
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(24, 0), 17);
map.enableDoubleClickZoom();
if (type == 'sat') {
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GHierarchicalMapTypeControl());
} else {
map.setMapType(G_NORMAL_MAP);
}
geocoder = new GClientGeocoder();
geocoder.getLocations(address, function (response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
//map_id.innerHTML('Could not find address on Google Maps');
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
map.setCenter(point, 17);
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Creates one of our tiny markers at the given point
function createMarker(point, index) {
var marker = new GMarker(point, icon);
var myMarkerContent = "<div style=\"width:200px; overflow:auto;\"><strong>" + title + "</strong><br />" + address + "</div>";
map.addOverlay(marker);
marker.openInfoWindowHtml(myMarkerContent);
GEvent.addListener(marker,"click",function() {
marker.openInfoWindowHtml(myMarkerContent);
});
}
createMarker(point);
}
});
}
}
If you load the page in google maps and then click on the "link" function, it gives you code to embed the site as an iFrame instead of messing about with the API- you could try this?
There is also a bug with this that sometimes the marker is not centered, particularly on a hidden div. My best way to overcome this is to put the iFrame of the google map in a separate file (e.g. pages/map.html) and then to make that the source of the iFrame in your page.
E.g.- instead of iFrame src="maps.google.com/ etc etc"
have it as src="pages/map.html"
Anyway, this post is 6 months old but better late than never!
For me, the problem was the iframe having size 0 (display:hidden) when the map was loaded. I added a delay to load the map after the iframe was loaded. This race condition could explain why some of the addresses rendered correctly.
Perhaps try this:
<script type="text/javascript">
$(document).ready(function(){
setTimeout("delayedLoad()",100);
});
function delayedLoad() {
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
}
</script>
(thanks to https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ)