NetTalk Central
NetTalk Web Server => Web Server - Ask For Help => Topic started by: ianburgess on July 23, 2012, 04:10:57 AM
-
I would like to implement a popup Google Map when hovering on a browse, based on underlying address. I have come across this : http://stackoverflow.com/questions/5418504/how-can-i-have-a-popup-google-map-appear-when-the-user-hovers-over-an-address
Would this javascript example be possible in a nettal browse, and if so, any suggestions re what to embed where (I am a Nettalk and Javascript novice!)?
Thanks
Ian
-
Hi Ian,
That JS in question didn't work as a mouseover anyway. So no it will continue to not work in NT either.
I've not tried google maps as a mouseover but it can be tricky with divs that are hidden then shown, so i expect mouseovers are even worse.
Placing a google map on a page is straight forward and there are lots of techniques most require 30 lines or so of javascript.
There are other shorthand versions also, which are links that open a window (these are the easiest).
I even have code that hooks into undocumented features of Google and downloads small (1000x1000px) maps as PNGs so i can display them just as images.
If you narrow down what you are after i can probably help.
Regards
Bill
-
In my 2010 course I showed how to use the vtip.js and vtip.css, and those files remain part of the shipping set. (To use them, all you have to do is add them to the app).
I mention this because, one thing they support is "html in tips". I'm not sure it'll be ideal in this case, not least because you have no control over the location of the tip, but it might be interesting for you.
Cheers
Bruce
-
If you narrow down what you are after i can probably help.
Regards
Bill
Hi Bill
Thanks for the offer. I would really like to be able to display a Google map on a form at a certain location and size (but resizeable like a text box) displaying the map of the address shown in the address fields and for the map to update automatically when address fields are edited (Ie. there and then rather than needing to save form first - ?refresh button).
Thanks
Ian
-
Hi Ian,
If I could make a suggestion. Build it as a link/button from a form first, that way you can deal with the google mapping stuff first, and learn how that works, before you deal with doing it via ajax.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google Maps API Example: Simple Geocoding</title>
<script src="//maps.google.com/maps?file=api&v=2.x&key=[GOOGLE.MAPS:KEY]" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
showAddress('199 Pacific Highway, North Sydney, NSW, Australia');
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
// marker.openInfoWindow(document.createTextNode(address));
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
There is a self contained HTML document that just draws a map in a window. Its quick and rough (because i'm lazying and doing other stuff).
Google have changed some of the API recently but this code still works. These examples are in API V2, they also have API V3, which i haven't bothered with yet.
Replace [GOOGLE.MAPS:KEY] with a map key you get from google You need a map key for API V2. Nowadays even this is tricky, Go to https://developers.google.com/ and then click on API Console and try and find your way to register a map V2 api key! This is probably the hardest bit :).
If you can chop this up and get the script onto a NT page and place the "map_canvas" div onto a page (using the XHTML tab). It will work.
Oh, and of course replace my address "199 Pacific ... etc" with the address in question.
Regards
Bill
-
Thanks Bill, I will give this a try.
Ian