Google Maps

pmeswani · April 4, 2007

Hi,

I am trying to paste the following

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Google Maps JavaScript API Example</title>

type="text/javascript"></script>

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(1,2);

}

//]]>

</script>

</head>

</body>

</html>

onto our about_us.php page and have hit a stumbling block. Any suggestions on how to get this to work would be much appreciated.

Iniquityclothing · April 4, 2007

is just to display a map of were you are?

xdam · April 4, 2007

I can't see where your map id is defined in the coding at the top? Perhaps you have abit of code missing i'd retrace my steps to see if I left anything out.

Iniquityclothing · April 4, 2007

youre trying to load an entire page into your document, is this what you need?

pmeswani · April 4, 2007

is just to display a map of were you are?

Yep.

pmeswani · April 4, 2007

I can't see where your map id is defined in the coding at the top? Perhaps you have abit of code missing i'd retrace my steps to see if I left anything out.

I removed it from the html, not sure if I should be posting it. I also removed the co-ordinates as well. I know that the code works as a standard html code, but am looking to integrate it into a php code. I have copied all the <script> </script> code into the header.php file and the body content into the about_us.php file. Am not sure if I am missing something obvious.

pmeswani · April 4, 2007

youre trying to load an entire page into your document, is this what you need?

Yes. Getting it to work as an independant HTML document is fine. However, I would like to keep the design consistant as much as possible. I know it's not difficult, but not being a php programmer, I am finding it difficult to translate html into php code. I have a workaround in place (linking to the html page), but would be happy to have a more permanent solution. I don't think it would do much harm by including the API key... so here is the code in full..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Google Maps JavaScript API Example</title>

type="text/javascript"></script>

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(50.919458,-1.288083), 15);

}

//]]>

</script>

</head>

</body>

</html>

Any suggestion would be much appreciated.

Jack_mcs · April 4, 2007

Hi,

I am trying to paste the following

<!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=xyz"

type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(1,2);

}

}

//]]>

</script>

</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 500px; height: 300px"></div>

</body>

</html>

onto our about_us.php page and have hit a stumbling block. Any suggestions on how to get this to work would be much appreciated.

You should paste the entire code into the file. Take a look at the Easy Map contribution to see how to add it in.

Jack

pmeswani · April 5, 2007

You should paste the entire code into the file. Take a look at the Easy Map contribution to see how to add it in.

Jack

Thanks Jack. I'll have a look at the Easy map and see how it's done. :)

pmeswani · April 5, 2007

You should paste the entire code into the file. Take a look at the Easy Map contribution to see how to add it in.

Jack

I've used the Easy Map code and made the necessary modifications, however the map is not displaying at all. The map can be viewed at:

http://www.grangeaquatics.co.uk/easymap.php

And the code is

<?php

/*

$Id: easymap.php,v 1.1 2005/12/31 by Jack_mcs

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Released under the GNU General Public License

*/

require('includes/application_top.php');

require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_EASYMAP);

$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_EASYMAP));

$action = (isset($_POST['action']) ? $_POST['action'] : '');

$line = array();

$line = explode(",", EM_LINES_COORD);

if (tep_not_null($action)) {

$longitude = $_POST['longitude'];

$lattitude = $_POST['lattitude'];

}

else

{

$longitude = EM_LONGITUDE;

$lattitude = EM_LATTITUDE;

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<?php require(DIR_WS_INCLUDES . 'header.php'); ?>

<tr>

<td class="columnLeft" width="<?php echo COLUMN_LEFT_WIDTH; ?>" valign="top"><table border="0" width="<?php echo COLUMN_LEFT_WIDTH; ?>" cellspacing="0" cellpadding="0">

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

</table></td><td background="images/links/shadow_column_left.gif"> </td>

<tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

<tr>

</tr>

<?php if (EM_SHOW_MAP_LINES == 'true') { ?>

<tr>

</tr>

<tr>

</tr>

<?php } ?>

</table></td>

</tr>

<tr>

</tr>

<tr>

<td>

v\:* {

behavior:url(#default#VML);

}

</style>

//<![CDATA[

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(<?php echo $lattitude; ?>, <?php echo $longitude; ?>), 14);

<?php if (EM_SHOW_MAP_SIZE == 'true') {

if (EM_SHOW_MAP_CONTROLS == 'complete') { ?>

map.addControl(new GLargeMapControl());

<?php } ?>

<?php if (EM_SHOW_MAP_CONTROLS == 'compact') { ?>

map.addControl(new GSmallMapControl());

<?php } } ?>

<?php if (EM_SHOW_MAP_VIEW == 'true') { ?>

map.addControl(new GMapTypeControl());

<?php } ?>

// map.addControl(new GOverviewMapControl());

<?php if (EM_SHOW_MAP_VIEW == 'true') { ?>

map.addControl(new GScaleControl());

<?php } ?>

<?php if (EM_SHOW_MAP_COORDINATES == 'true') { ?>

GEvent.addListener(map, "moveend", function() {

var center = map.getCenter();

document.getElementById("message").innerHTML = center.toString();

});

<?php } ?>

// Our info window content

var infoTabs = [

new GInfoWindowTab("<?php echo EM_LOCATION_BUBBLE_TITLE; ?>", "<?php echo EM_LOCATION_BUBBLE_CONTENT; ?>")

<?php if (EM_SHOW_MAP_TAB == 'true') { ?>,

new GInfoWindowTab("<?php echo EM_LOCATION_TAB_TITLE; ?>", "<?php echo EM_LOCATION_TAB_CONTENT; ?>")

<?php } ?>

];

<?php if (EM_SHOW_MAP_MARKER == 'true') { ?>

// Place a marker in the center of the map and open the info window

// automatically

var marker = new GMarker(map.getCenter());

map.addOverlay(marker);

<?php if (EM_LOCATION_MAP_BUBBLE == 'true') { ?>

marker.openInfoWindowTabsHtml(infoTabs);

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowTabsHtml(infoTabs);

});

<?php } } ?>

<?php if (EM_SHOW_MAP_LINES == 'true') { ?>

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();

// Add a polyline with five random points. Sort the points by

// longitude so that the line does not intersect itself.

var points = [];

points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[0]; ?>,

southWest.lng() + lngSpan * <?php echo $line[1]; ?>));

points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[2]; ?>,

southWest.lng() + lngSpan * <?php echo $line[3]; ?>));

points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[4]; ?>,

southWest.lng() + lngSpan * <?php echo $line[5]; ?>));

points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[6]; ?>,

southWest.lng() + lngSpan * <?php echo $line[7]; ?>));

points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[8]; ?>,

southWest.lng() + lngSpan * <?php echo $line[9]; ?>));

points.sort(function(p1, p2) {

return p1.lng() - p2.lng();

});

map.addOverlay(new GPolyline(points));

<?php } ?>

}

//]]>

</script>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</form>

<tr>

<tr>

<td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table></td>

<td width="<?php echo COLUMN_RIGHT_WIDTH; ?>" valign="top"><table border="0" width="<?php echo COLUMN_RIGHT_WIDTH; ?>" cellspacing="0" cellpadding="2">

<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>

</table></td>

</tr>

</table>

<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>

<br>

</body>

</html>

<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

Any suggestions would be welcomed.

Thanks again.

Jack_mcs · April 5, 2007

See if the map appears without your modifications. If it does, it is something in those changes. If it doesn't, you are missing some required code or option.

Jack

pmeswani · April 5, 2007

See if the map appears without your modifications. If it does, it is something in those changes. If it doesn't, you are missing some required code or option.

Jack

The only modifications made is the key (in the php file) and the co-ordinates (in the registry). Nothing else has been modified as far as I know. I know the co-ordinates and the key are right as it works http://www.grangeaquatics.co.uk/map.html.

Google Maps

Recommended Posts

pmeswani

Iniquityclothing

xdam

Iniquityclothing

pmeswani

pmeswani

pmeswani

Jack_mcs

pmeswani

pmeswani

Jack_mcs

pmeswani

Archived

Browse

Activity