|
JavaScript - Geocoding Google Maps Lat Long - Help!
hi,
in my code below, I need to change the line Code: map.setCenter(new GLatLng(i[0], i[1]), 13); to have the LAT and LONG from my database therefore, I think maybe I need to open a database connection (which I think i am on the same page) and put some ASP in my JavaScript?! Code: var i = geoCodes.split(",");
if (GBrowserIsCompatible()) {
if(eval(document.getElementById("mapping"))) {
var map = new GMap2(document.getElementById("mapping"));
map.setCenter(new GLatLng(i[0], i[1]), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
Similar TutorialsI am not familiar with the Google Maps API, but reading through several tutorials and their documentation I have been able to create a basic version of what I need. It is simply a list of places to the right of the map, which can be clicked and will center the map on that location. However, I seem to be unable to use geocoding so that I can use addresses instead of latitude and longitudes. Here's what I have so far: http://www.mpapo.org/testzone/gmaps.html That is the functionality that I need, but I need to be able to use addresses instead of coordinates. I found this script from a tutorial: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ADD_YOUR_KEY_HERE"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var geocoder;
var map;
var restaurant = "The Old Mohawk Restaurant";
var address = "821 Mohawk Street, Columbus OH";
// On page load, call this function
function load()
{
// Create new map object
map = new GMap2(document.getElementById("map"));
// Create new geocoding object
geocoder = new GClientGeocoder();
// Retrieve location information, pass it to addToMap()
geocoder.getLocations(address, addToMap);
}
// This function adds the point to the map
function addToMap(response)
{
// Retrieve the object
place = response.Placemark[0];
// Retrieve the latitude and longitude
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
// Center the map on this point
map.setCenter(point, 13);
// Create a marker
marker = new GMarker(point);
// Add the marker to map
map.addOverlay(marker);
// Add address information to marker
marker.openInfoWindowHtml(place.address);
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
</body>
</html>
And it works, but how would I integrate it with the other script? I have tried several times/ways but it always crashes. Any ideas? I search through the forums and google but didn't find anything on this, but I was wondering if anyone was having or has had issues with google maps changing their lat/long coordinates, even when a frozen version is declared? Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> In the geocoding portion: Code: geocoder.geocode({'address': query}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var coordinates = results[0].geometry.location;
point.latitude = coordinates['oa'];
point.longitude = coordinates['pa'];
return callback();
} else {
var error = new Object();
error.message = 'We were unable to locate your latitude and longitude. Please check your address and try again.<br />';
error.callback = function(){};
return point.errorHandler(error);
}
});
The coordinates variable keeps changing the key. Originally it was: Code: point.latitude = coordinates['xa']; point.longitude = coordinates['ya']; Then: (and several others) Code: point.latitude = coordinates['sa']; point.longitude = coordinates['ta']; Now: Code: point.latitude = coordinates['oa']; point.longitude = coordinates['pa']; Why if a frozen version is declared, is this still changing? Hi I have the following code which is created server side to convert postcodes from a database into coordinates. I'm fairly sure there's something in the javascript which is preventing all the postcodes from the code being converted. Does anyone have any ideas... This code has been taken from something else so could probably be tidied up a lot but every time I try it stops working. Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Geocoding UK Postcodes with Google APIs Demo</title>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
</head>
<body>
<div id="message"></div>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["PL14 4PW, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["EX10 0QN, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["BH19 3HG, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["CT18 8HB, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["NR9 4DD, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["BT94 5HF, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["FK17 8HY, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["SY7 9LT, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["LL58 8HU, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["SA62 3AL, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["DL8 3HQ, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["YO18 8RE, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
</body>
</html>
Hi there, I know too little of JavaScript to get the Google Maps API working. I hope someone can help me out! My goal is to display an address. In the example on google, you can input it through a form: http://code.google.com/apis/maps/doc...ng-simple.html I would like the map to show the location+marker when I open the page, not after clicking a submit button. However, I only want an address in my html. I want the API to convert it in a LatLng format. Hopefully, someone can take the time to look at it. It's all in the source code of the page mentioned above, I believe. Thanks! Hi, I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank. This is the code for my called page with the instructions for the second map: PHP Code: <?php echo $_POST['Map'] . '<br />'; ?> <div id="placemap_canvas"></div> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #placemap_canvas {width:100%; height:150px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM regions WHERE RegionPId='{$_POST['Map']}'"); while($row = mysql_fetch_array($result)){ echo $row['maplink']; } mysql_close($con); ?> ); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("placemap_canvas"), myOptions); } </script> And this is the script of the main page, just in case I would be better off keeping them both in one place. Code: <head>
<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height:250px}
body {height:250px}
#map_canvas {width:30%; height:250px;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng (
<?php
include("dbconnect.php");
$result = mysql_query("SELECT * FROM countries
WHERE Country='{$_SESSION['Country']}'");
while($row = mysql_fetch_array($result)){
echo $row['Map'];
}
mysql_close($con);
?>);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div class="countryright" id="map_canvas">
include("dbconnect.php");
$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];
global $turnsol;
global $violet;
global $wakerobin;
echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';
$result=mysql_query("SELECT * FROM regions
WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
ORDER BY sub ASC");
while($row = mysql_fetch_array($result)){
$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
$tigerlilly=$row['RegionPId'];
echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
}
echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';
echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';
mysql_close($con);
?>
I've cut out the script that doesn't relate to this so I hope I haven't missed anything important. I'm completely at a loss how to embed a map with the new google maps api setup. I found a snippet of code that I dropped in with some small database variables pulled in and was done. Then an error came that the API was no good. So I went in and set up an anaccount, got an api and now I just simply have no clue what their instructions are saying I need to do. Gah! Here's what I originally had: I now have a Client ID, client secret and stuff. But no clue how to set up this url, etc. Code: </script>
<script src="//maps.google.com/maps?file=api&v=2&key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>), 13);
// Add the latitude/longitude marker to the map
var point = new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>);
map.addOverlay(new GMarker(point));
map.setUIToDefault();
}
}
</script>
<b>Map:<br><br><div id="map_canvas" style="width: 500px; height: 300px; z-index:4000;border-width:medium;border-color:#030;"></div></b>
Hi I have just started looking at the Google maps, and have atutorial that will get the co-ordinates. What I want this to do, is then populate two fields on a form one called longitude and one called latitude Code: function usePointFromPostcode(postcode, callbackFunction) {
localSearch.setSearchCompleteCallback(null,
function() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
callbackFunction(point);
}else{
alert("Postcode not found!");
}
});
localSearch.execute(postcode + ", UK");
}
Any ideas/tips would be be much appreciated Hey I'm quite new at javascript and am currently in the process of creating a site that embeds google maps using an xml document. What I'm trying to do is categories the markers on my map. I am trying to make it so there are check boxes at the bottom and when i check the boxes, i.e. theatres, the markers will appear for the theatres and disappear when unchecked. Using some example code i have modified, i have so far got the maps to pickup the markers from the xml with the check boxes but the markers are all just on the page and the check boxes dont do anything and I am stuck as to of why. here's my code: Code: <!DOCTYPE HTML>
<html>
<head>
<title>Google Maps</title>
<script src="mykey"></script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<form action="#">
Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" />
Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" />
Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />
</form>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var side_bar_html = "";
var gmarkers = [];
var map = null;
function createMarker(point,name,html,category) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
side_bar_html += '<a href="javascript<b></b>:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
return marker;
}
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
document.getElementById(category+"box").checked = true;
}
ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
document.getElementById(category+"box").checked = false;
that we just hid
infowindow.close();
}
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 53.8363,-3.03771), 11);
GDownloadUrl("categories.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = "<b>"+name+"<\/b><p>"+address;
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point,name,html,category);
map.addOverlay(marker);
}
document.getElementById("side_bar").innerHTML = side_bar_html;
show("theatre");
hide("golf");
hide("info");
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
</body>
</html>
If anybody help with this and tell me where I am going wrong, it would be much appreciated. thanks I am using jMapping(http://vigetlabs.github.com/jmapping/) for using jQuery with google maps. What I'm trying to do is add an event listener so that when you click on a marker it will call a function I made within the jMapping function. Does anyone have any clues? everything I've tried doesn't work.
I have some problems with intergrating google maps into my page I cant seem to get a marker to appear on my map. I have tried numerous methods but non seem to work. I have integrated the google maps on my main site, repositioned and re-sized. The code below is a test page i work on to get code to work. It's just a map on a page entire code: <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 25px; padding: 25px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrxZnpYBNIwzBFVYaDY__BMONEjNEGZaI&sensor=false"> </script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, 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:"Hello World!" }); </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> can anybody tell my where i am going wrong and just the map appears with no marker? thanks Hey all I'm quite a newbie at javascript and I'm trying to have links to google maps markers. I have a page with my embeded google maps on it and some markers. What I'm basically looking to do is have a web page with a menu down the side and when you click the menu items, the google maps markers would pop up on the map. For example, city attractions down a side menu and when you click say restaurants, the markers would pop up the location restaurants in a certain place, then you could click pubs and the restaurant markers would dissapear and the pub markers would appear. Can anyboy help me with this or even direct me to some code that would help. Thanks all. Hi, Not sure how difficult this will be but im working on a javascript/HTML5 game, and thought it would be interesting to allow for people to add their score to a google map at their location. I can get the google map and allow people to add their own markers but i dont no how i would store them, and then reload them when someone plays the game. any ideas? Thanks, Luke hello all, what i would like to implement is the following : http://mon.grnet.gr/network/maps/lite/?load&ip but, the problem is that, although the numerical data that show the traffic volume passing through a link are available to me, i do not have clue on how i can display them onto the map ... ? i would be thankful, if you could give me a piece of advice. Hi, I'm making a javascript with google maps API. The concept is that you have to fill in your desired location and that it shows you the route to that location. It has an unchangeable starting location. I also made it so that you have a description panel. Now when I try to make it so that the description panel is next to the map with the route on, my description panel just drops below my map. I believe this problem is either me f*cking up my div's or my CSS. Here's what i used for my CSS <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; width: 70% } #directionsPanel { float:right; width:30%; height 100% } @media print { html, body { height: auto; } #map_canvas { height: 650px; } } </style> And here's what i used for my div's <div id="main" style="width:100%;height:100%"> <div id="map_canvas" style="top:30px;width:70%;height:80%"></div> <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div> <div id="directionsPanel" style="float:right;width:30%;height 100%"></div> </div> Any help regarding this would be much appreciated. (And yes, I'm still new to scriptwriting/coding in general) Hello! I'm developing a small application with Google Maps API for use in Wordpress and didn't want to place all the javascript into the Worpress page template file. But whenever I place the javascript that works fine in page tempalte into separate javascript file in Wordpress, all of the code using Google Maps API except the code that runs Maps itself stops working. So the Maps runs but for example Geocoder does not. I'm simulatenously using Google's jQuery API. I hope someone has experience with this and can help me. I'm trying to make a map that will show your current location, but also load an xml file to show certain attractions in your area. I have the code to work for getting your current location, but I can't figure out how to implement loading the xml file and placing markers based off of that xml file. Here is the code for getting my location: Code: function show_position(p)
{
document.getElementById('current').innerHTML="latitude="+p.coords.latitude.toFixed(2)+" longitude="+p.coords.longitude.toFixed(2);
var pos=new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
map.setCenter(pos);
map.setZoom(14);
var infowindow = new google.maps.InfoWindow({
content: "<strong>yes</strong>"
});
var marker = new google.maps.Marker({
position: pos,
map: map,
title:"You are here"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script >
Can anybody help me figure this out? Thank you in advance Hey everyone! I have been fiddling with this for a while now. I cant seem to make anything work. I have tried geocoding services, get position etc. I am sure it can be done so I was hoping someone here may have some experience with the newest API for google maps, V3. In my code below I just have a simple map with a marker.. not important. What I am trying to do is, when you drag the little man to switch the map into streetview, I need to display the current latitude and longitude in some input boxes. This needs to happen in streetview mode though which I have not been able to make happen. Anyone care to lend a few minutes? It must be possible! Code: <html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<style>
#map_canvas {height: 500px; width:800px;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
});
var markers = [
{ lat: 49.202612, lng: -122.879612, name: 'McDonalds', marker: 'default' }];
// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
Streetview Latitude: <input type="text" name="latitude" value="?"><br>
Streetview Longitude: <input type="text" name="longitude" value="?">
</body>
</html>
Hi guys, I am a new poster and new to google maps. I have been working on geocoding and I have a problem, the example below works fine, all rollovers and icons work perfectly. However, the info window will only display for one point. I am assuming I have this line of code in the wrong place. new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);}); Can anyone please help me? I would be so appriciative. Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var MarkersArray = [
['Oceans Eleven Casino', 33.199931,-117.368917, 4, '<div id="">Oceans Eleven Casino - text</div>', 'images/search.chips.small.png'],
['Pala Casino & Resort', 33.359418,-117.10583, 5, '<div id="content">Pala Casino & Resort - text</div>', 'images/search.chips.png'],
['Casino Pauma', 33.333271,-116.990626, 3, '<div id="content">Casino Pauma - text</div>', 'images/search.chips.small.png'],
['Lucky Lady Casino', 32.75844,-117.075513, 2, '<div id="content">Lucky Lady Casino - text</div>', 'images/search.chips.small.png'],
['Palomar Club', 32.75542,-117.13433, 1, 'Palomar Club - text', 'images/search.chips.png']
];
function setMarkers(map, locations) {
// Add markers to the map
for (var i = 0; i < locations.length; i++) {
var MarkersArray = locations[i];
// Marker sizes are expressed as a Size of X,Y
var image = new google.maps.MarkerImage(MarkersArray[5],
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(60, 50),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 33));
var shadow = new google.maps.MarkerImage(MarkersArray[5],
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(75, 60),
new google.maps.Point(0,0),
new google.maps.Point(0, 33));
// Shapes define the clickable region of the icon.
var shape = {
coord: [0,0,1,54,59,54,59,0],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow({content: MarkersArray[4]});
var myLatLng = new google.maps.LatLng(MarkersArray[1], MarkersArray[2]);
var marker = new google.maps.Marker({position: myLatLng,map: map,shadow: shadow,icon: image,shape: shape,title: MarkersArray[0],zIndex: MarkersArray[3]});
}
new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
}
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(32.75542,-117.13433),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, MarkersArray);
}
</script>
Hey all, I was wondering if someone would be able to help me with a problem I've been having. I'm attempting to find coordinates for several addresses at a time. I'm using a for-loop to loop through an array of addresses. I figured it would be best to have a separate function to evaluate the coordinate given an address, and just call it in every loop. Note that my code below is simplified (I removed the for loop because that's not where I'm having trouble). I know that the issue is probably because I'm trying to return a value from an anonymous function... I tried making the variable global, I tried having a return line from within the anonymous function, nothing has worked... any tips? Thanks -- Code follows Code: function initialize(){
var geocoder = new google.maps.Geocoder(); // creating a new geocode object
var locCood = findcood('44106', geocoder);
}
function findcood(addr, geocoder)
{
var cood;
if (geocoder) {
geocoder.geocode({'address': addr}, function(results, status, cood){
if (status == google.maps.GeocoderStatus.OK)
cood = results[0].geometry.location;
else {
cood = null;
alert("Geocode was not successful for the following reason: " + status);
}
});
}
else
{
alert("No Geocode");
cood = null;
}
alert(cood);
return cood;
}
|
|||||||