Trouble manipulating map from HTML <a> link

[James Renshaw]

Hi,

 

I want to do something that I thought would be simple, but I'm having lots of trouble with. I want to put a link on a page above a map, and when you click on it, it centers the map on a specific point.

 

I've tried a few different ways, but every way I try seems to be hitting a 'map is null or not an object' error. Each way seems to be overcomplicated too, it's always doing something clever with geocoding, info windows or markers, which isn't what I need, so trying to take the right part of the code is a nightmare.

 

Can anyone help me and let me know what I'm doing wrong? The code I'm using it below, it's all in the body, because editing the head is a bit of a pain and I'd rather not (we use templates, and I don't want to add it to every page when it's only going to be used on 1). It should center on the point I've created a marker at, but always throws up an error instead.

 

The code:

 

{literal}

<script type="text/javascript">  

var map;

function myCenter() {
   map.setCenter(latlng);
}

function googlemap() {    

var latlng = new google.maps.LatLng(53.518867, -2.046067);
var latlng2 = new google.maps.LatLng(53.492872,-2.08167);    

var myOptions = {

zoom: 15,

center: latlng2,

mapTypeControl: false,

mapTypeId: google.maps.MapTypeId.ROADMAP    

}

var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);   

var marker = new google.maps.Marker({

position: latlng,
map: map,
title: "George Lawton Hall"
});  

}

</script>

{/literal}

<h1 class="center">Approved Site Locations for Banners</h1>

<p><a href="javascript:myCenter()">Go to GLH</a></p>

<div style="width: 450px; height: 450px; margin-left: auto; margin-right: auto" id="mapcanvas">
</div>

{literal}
<script type="text/javascript"> 

window.onload = function() {

googlemap(); 

   }; 

</script>
{/literal}

Hope someone can help.

 

Thanks,

 

James

[James Renshaw]

Hi,

 

Just an update, I've read the 'do not post code' rule, and understand why you want me to add a link instead, so here it is:

 

http://www.tameside.gov.uk/admin/preview?rid=26897&v=draft

 

Hope that helps give a better understanding of what I'm trying to do, and why it's not working.

 

Thanks,

 

James

[peter mlich]

http://code.google.com/intl/cs/apis/maps/documentation/javascript/examples/
http://code.google.com/intl/cs/apis/maps/documentation/javascript/examples/control-custom.html
Move map, then click on Home button.

You problem is in basic javascript.You define "latlng" in function, not a global variable. "map" you define as global variable.

function googlemap()
{    

var latlng = new google.maps.LatLng(53.518867, -2.046067);

...
}

function myCenter() {
  alert(latlng); // write undefined, because you not send
   map.setCenter(latlng);
}

What you must do?
A

<script type="text/javascript">  

var map;
var latlng; // add
...

function googlemap() {    

latlng = new google.maps.LatLng(53.518867, -2.046067); // remove var

B

<script type="text/javascript">  

var map;
var latlng = new google.maps.LatLng(53.518867, -2.046067); // add
...

function googlemap() {    

//var latlng = new google.maps.LatLng(53.518867, -2.046067); // comment line

C

<script type="text/javascript">  

var map;
var latlng = new google.maps.LatLng(53.518867, -2.046067); // add
...

function googlemap() {    

//var latlng = new google.maps.LatLng(53.518867, -2.046067); // comment line
...
//and comment function mycenter, not use
<p><a href="javascript:map.setCenter(latlng)">Go to GLH</a></p>

[James Renshaw]

Thanks, that has indeed solved it.

 

I think the main problem was that I'd put 'var' before 'map' on 2 occasions, but then I would have still had those global variable problems. Thanks for your help, I should be able to make a great page from this now.