YetAnotherForum
Welcome Guest Search | Active Topics | Log In | Register

Help with code to call Google Maps from Java Script. Options
Sean
#1 Posted : Friday, February 19, 2010 3:16:35 PM
Rank: Newbie

Groups: Registered

Joined: 8/7/2009
Posts: 3
Location: Wa
I wrote some code to display Google Maps within one of my web pages. As a basic configuration this works fine. However I would like to also be able to dynamically look up the Lng/Lat from the Java Script while this is running. So far all I have seen is the requirment to use an XML file as input. Is there a way to do this on the fly so that I get the most current information? Can you call a web service or routine form Jave Script like the one to Geocode the locations?
Geek
#2 Posted : Tuesday, February 23, 2010 4:46:58 PM
Rank: Newbie


Groups: Registered

Joined: 7/10/2009
Posts: 4
Location: Southern California
You cannot make a call like this from Java Script. Instead I would suggest a service that runs seperatly that creates the XML file. You can then consume the XML file like you are now within your standard JavaScript.
Nick
#3 Posted : Tuesday, June 29, 2010 9:35:49 AM
Rank: Newbie


Groups: Registered

Joined: 7/13/2009
Posts: 5
Location: Chicago, Ill
Do you have a sample of the code you are referring to?
barrob326
#4 Posted : Tuesday, June 29, 2010 9:40:47 AM
Rank: Member


Groups: Registered

Joined: 7/10/2009
Posts: 21
Location: So California
I have some code that does this, there are several parts here.

First I have an include file that contains the bulk of the code to load the data from the XML file and populate the map on screen. That file listed below. This is in an older page I have so its an ASP file accessed through a standard <!--#include file="inc/GoogleCalJScript.asp"--> This is in my page just above the /Head statement.

<script type="text/javascript"
src="http://www.google.com/jsapi?key=YOUR GOOGLE GENERATED KEY GOES HERE"></script>
<script type="text/javascript">
google.load("maps", "2");
google.load("search", "1");
// Call this function when the page has been loaded
// Old Center of US was 37.649034, -96.855469
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(40.7704255, -111.8912400), 3);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());

function createPoint(Lat, Lng, mName, mAddress, mCity, mState, mPhone) {
var point = new GLatLng(Lat,Lng);
map.addOverlay(createMarker(point, mName, mAddress, mCity, mState, mPhone));

}

// Creates a marker at the given point with the given number label
function createMarker(point, mName, mAddress, mCity, mState, mPhone) {
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml("<b>" + mName + "</b>" + "<br />" + mAddress + "<br />" + mCity + "<br />" + mState + "<br />" + mPhone );
});
GEvent.addListener(marker, "click", function() {
marker.showMapBlowup();
});
return marker;
}

// Load points from XML file
GDownloadUrl("Dealers.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("point");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));

map.addOverlay(createMarker(point, markers[i].getAttribute("dealer"), markers[i].getAttribute("address"), markers[i].getAttribute("city"), markers[i].getAttribute("state"), markers[i].getAttribute("phone")));
}
});

// Add 5 markers to the map at random locations For testing only, currently set to not place any markers.
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 5; i < 5; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
}

google.setOnLoadCallback(initialize);

</script>
Please submit any questions or comments through my website.

http://www.qualitysoftwaredesign.com
barrob326
#5 Posted : Tuesday, June 29, 2010 9:42:46 AM
Rank: Member


Groups: Registered

Joined: 7/10/2009
Posts: 21
Location: So California
In the body of my page I have the following line of code. This will populate the Google Map at the correct location for you.

<div id="map" style="width: 750px; height: 450px"></div>
Please submit any questions or comments through my website.

http://www.qualitysoftwaredesign.com
barrob326
#6 Posted : Tuesday, June 29, 2010 9:48:43 AM
Rank: Member


Groups: Registered

Joined: 7/10/2009
Posts: 21
Location: So California
Finally you need the XML file that contains not only the addresses but the lng lat for each location. The file should look like this.
<Dealers>
<Dealer><point lat="44.1201820" lng="-101.5200270" dealer="Building Materials " address="100 North St. " city="Las Vegas " state="Nevada " phone="(702) 633-8012 "/></Dealer>
<Dealer><point lat="81.889984" lng="-38.0627037" dealer="My Dealer " address="100 East St. Days Rd " city="Los Angeles " state="California " phone="800-555-1212 "/></Dealer>
</Dealers>

You can have as many records as you want, the code will spin through them all. You can manually create this file or write an app to do it for you on the fly. I wrote a .NET service that wakes up and pulls all of these addresses from a SQL Database, calls the Lat Lng Generator to get the proper location and populate the XML file nightly. If your data is not changing though, you can just do this manually and it will work.

This example file is called Dealers.xml when referenced in the code above.

This should allow you to integrate a Google Map into a web page, add 1 to N points on the map with hover windows that show site details including name and address.
Please submit any questions or comments through my website.

http://www.qualitysoftwaredesign.com
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.3 | YAF © 2003-2009, Yet Another Forum.NET
This page was generated in 0.246 seconds.