Hi all,
Is it possible to have a longitude and latitude field in a web app and then have them generate a point on a google map?
Or would I need to also have address fields filled in the web app data to have a point on a google map?
Thanks!
In Google's tutorial they're not using the address - https://developers.google.com/maps/documentation/javascript/tutorial#H elloWorld
You just need to replace the values in new google.maps.LatLng(-34.397, 150.644), with tags that render those.
Cheers,
-mario
THanks Mario, I was thinking more of the Google maps stuff in BC, which last time I used it in a webapp it looked at the address fields, and you had to leave the description field in the webapp free for the google map funtionality. You also, of course, had to tick in the setup of the web app setup Allow Proximity search and tick the countries you require.
Or are you talking about a google maps tag in BC?
THanks,
Mary
Well, yes. To use BC you need an address. BC will geocode the address into lat and long and pass those values together with address to Google for plotting. Without address you can't use BC. But from your question I understood that you have lat and long and all you need to do is plot them on the map. You can easily do this by creating couple of custom fields for lat and long and plot them into JS snippet from that link I gave you.
Cheers,
-mario
Thanks for that Mario. I got it going in the alternative web app layout as per the code below.
However, the map does not display on search results, even if I have specified that I want the alternative list layout.
Does anyone have any ideas also how to populate a map with multiple results from my custom lat long fields?
Thanks in advance.
Here is what I am using to show the search results using the alternative layout. It leaves space for the map, but does not display it.
{module_webappsresults,,,true,-1,true,1}
This code does display the map in the alternative web app layout, but does not work in web app search results.
<script>
function initialize() {
var myLatlng = new google.maps.LatLng({tag_latitude},{tag_longitude});
var myOptions = {
zoom:8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Planting Location"
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=true&callback= initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<p>{tag_name} {tag_shire} {tag_no of trees} trees planted Lat and Long: {tag_latitude} {tag_longitude}</p>
<div id="map_canvas" style="width: 400px; height: 400px;"></div>
Hi Mario,
I now have another problem with this one. I got the code working fine with my custom fields of lat and long on one web app. I am now using this code for another client webapp, which uses the BC address fields. I have used these two tags from the web app to get the lat and long details:
{tag_addresslatitude},{tag_addresslongitude}
and they do not work properly. They just show the general suburb location, not the detailed address in the google map for the web app item.
I have used {tag_address1}{tag_addresscity} {tag_addressstate} {tag_addresszipcode}fields in the web app data.
So how are {tag_addresslatitude},{tag_addresslongitude}produced from those fields?
Here is the code I used, and it throws up the same google map for every web app item in the same suburb. Weird.
<script>
function initialize() {
var myLatlng = new google.maps.LatLng({tag_addresslatitude},{tag_addresslongitude});
var myOptions = {
zoom:12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"AND Retailer"
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDMWJWGGXo-bZB-EVpTx-
nerCAlhQfyOL8&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<table>
<tbody>
<tr>
<td>
<h3>{tag_name}</h3>
</td>
</tr>
<tr>
<td> {tag_address1}</td>
</tr>
<tr>
<td> {tag_addresscity} {tag_addressstate} {tag_addresszipcode}</td>
</tr>
<tr>
<td>
<h4> {tag_phone}</h4>
</td>
</tr>
</tbody>
</table>
<div id="map_canvas" style="width: 400px; height: 400px;"></div>
Lat and Long values are geocoded from Country, State and Postcode/Zipcode values. You have to have all 3 fields present to get those values. If you're getting a zero for lat and long our database may not have the values you entered from state and zip or you've entered them incorrectly. Please note that the states must be abbreviations.
Cheers,
-mario
Hi Mario,
Thanks for that. So if lat and long are only geocoded from the Country, State and Postcode, that would explain why entries in the same suburb throw up the same google map. ie the centre of the suburb they are in.
So what about Address1 field, is that not included in the lat long geocoded by the web app?
Thanks for you help on clarifying this by the way.
Has anybody figured this out? I am developing a business directory and need the Google Map on each individual listing created with a web app. I have been able to get the map to show (using myLatlng = new google.maps.LatLng({tag_latitude},{tag_longitude}) but for some reason my map locations are way off. I'm thinking it has something to do with what's discussed above. Any help would be appreciated.
Update: OK. I just did a GPS coordinate search and it looks also that the wrong GPS #'s are being used. What could cause this?
Example address: 805 E. Main Street Salisbury MD 21804
GPS coordinates returned in BC: 38.359332,-75.56931
Correct GPS according to Google: 38.36683291257159, -75.58512069999995
V2 was a bit buggy and TBH I found BC's implementation to be buggy.
I Use googles V3 Api and store the map locations in data elements and run my maps function to read the web app item API.
Works, lots of control,and can use the canvas / HTML based map version over the iFrame implementation.
Liam,
How exactly did you get this to work? I am creating maps but the Lat/Long tags are not outputting at all. I am getting nothing.
Here is the code that I am using to render the map:
var mapOptions = {
zoom: 12,
keyboardShortcuts: false,
center: new google.maps.LatLng({tag_addresslatitude}, {tag_addresslongitude}),
disableDefaultUI: true,
draggable: false,
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
If I input actual values, the maps render correctly.
Thanks.
Liam, how do you "store the map locations in data elements"? I'm having problems with the latitude/longitude returned from BC to be erroneous. I have many addresses located within a few city blocks and they're all coming in from BC as one latitude/longitude. Thanks in advance for any guidance you may have.
Hi Mario
In Sweden we don't use state in our adress, just city. When I add a swedish adress in a webapp and using standard map-listing, map is centered west of africa, but the pointer is correct. When using UK address (whitout state) it center and works well.
BUT - When using uk address in my custom-map I get values for {tag_addresslatitude} and {tag_addresslongitude} and it works fine, but when using a Swedish address I get zeros.
Your collegue Mihai_Tica talked about update in a database to solve an address (see below).
I havent found a solution my self.
Test: Standard BC-function: bbq.se/t
Test: Custom map in UK: bbq.se/karta
Thanks!
//J
Hi Johan,
It's probably the case where the lat and long for Swedish addresses are resolving to 0,0 and are being plotted on 0 meridian and 0 parallel, off of the coast of Africa. Mihai has probably asked you for the addresses and lat and long values to populate our DB. You should get back to him and supply him with those details.
Cheers,
-m
North America
Europe, Middle East and Africa
Asia Pacific