Integrating Google Maps API v3 into Main Page

**legel** · 28 Nov 2010, 08:23 PM

I cannot integrate the customizable Google Maps API v3 into the main page of my Zen Cart. I can place a static map into the Contact Us page, but that's not what I want. I want to place a map that is customizable so that I can create my own icons and utilize other features of version 3 of the Google Maps API.

To be specific, the issue that I am having is that, when I place the code into tpl_main_page.php, the map shows up either above the page or below the page but never in the actual page; nothing happens when I put it in define_main_page.php. And when I try putting the code into the Zen Cart Define Pages Editor, it shows up as text only with no image.

Please help!

Thank you,

Faith

**kobra** · 29 Nov 2010, 12:46 AM

Google Maps API v3 does not appear to be a contributed module and as such your reference to code is invisible to us

Post the code for what you are attempting

**legel** · 29 Nov 2010, 06:37 PM

Thanks for your reply, Kobra. I am posting the code that I would like to show as a map below, with a couple of caveats: (1) I have no idea what you mean by "contributed module," and (2) I don't know who you're referring to when you speak of "us." My confusion, however, is not at all relevant if providing the code can get me the help I need. I certainly hope so.



<!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: 80px; padding: 58px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&key=ABQIAAAA0EwME6tzo70hvJCts4V5chR39u5JK96pjw4MnaU7x2vf79eF ThTWPQFEMs1wJNgedbeW0oekDgBv_w">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(35.035033, -90.022988);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

**legel** · 29 Nov 2010, 08:53 PM

Please let me know what additional information you need. I'm not sure if the Google API key will work.

**legel** · 4 Dec 2010, 09:12 PM

I'm not sure if I'm following proper protocol, but I haven't heard back from anyone on my issue in a few days and would like to know how things are going. Please let me know if any progress is being made and/or whether I should just sit tight.

Thanks!

faith

Thread: Integrating Google Maps API v3 into Main Page

Thread Tools

Search Thread

Display

Integrating Google Maps API v3 into Main Page

Re: Integrating Google Maps API v3 into Main Page

Re: Integrating Google Maps API v3 into Main Page

Re: Integrating Google Maps API v3 into Main Page

Re: Integrating Google Maps API v3 into Main Page

Similar Threads

Integrating Facebook into Main Page

Integrating Zen into my page....

Need urgent help integrating a gateway API into zen-cart

Integrating Google Checkout into a valid contribution.

Posting Permissions