how to make html link when clicked, would open area of the map coordinates

Yellow Lemon

unread,

Nov 16, 2010, 12:22:34 PM11/16/10

to google-map...@googlegroups.com

Sorry that the text was translated by an interpreter

Tell me please how to make html link when clicked, would open area of the map coordinates.

For example, in version 2 it was done as follows

<span onclick="map.setCenter(new GLatLng(37.020098,-92.373047), 4);" style="cursor: pointer;"><u>north america</u></span>

And as for version 3?

Thanks for the answers

CroNiX

unread,

Nov 16, 2010, 1:15:25 PM11/16/10

to Google Maps JavaScript API v3

probably just:
map.setCenter(new google.maps.LatLng(37.020098,-92.373047));

Yellow Lemon

unread,

Nov 16, 2010, 2:19:40 PM11/16/10

to google-map...@googlegroups.com

tried this option, alas does not work :(

geoco...@gmail.com

unread,

Nov 16, 2010, 2:28:12 PM11/16/10

to Google Maps JavaScript API v3

On Nov 16, 10:15 am, CroNiX <cronix...@gmail.com> wrote:
> probably just:
> map.setCenter(new google.maps.LatLng(37.020098,-92.373047));

or
map.setCenter(new
google.maps.LatLng(37.020098,-92.373047));map.setZoom(4);
if you want to set the zoom also.

-- Larry

>
> On Nov 16, 9:22 am, Yellow Lemon <yellowlemon....@gmail.com> wrote:
>
>
>
> > Sorry that the text was translated by an interpreter
>
> > Tell me please how to make html link when clicked, would open area of
> > the map coordinates.
>
> > For example, in version 2 it was done as follows
> > <span onclick="map.setCenter(new GLatLng(37.020098,-92.373047), 4);"
> > style="cursor: pointer;"><u>north america</u></span>
>
> > And as for version 3?
>

> > Thanks for the answers- Hide quoted text -
>
> - Show quoted text -

geoco...@gmail.com

unread,

Nov 16, 2010, 2:39:44 PM11/16/10

to Google Maps JavaScript API v3

On Nov 16, 11:19 am, Yellow Lemon <yellowlemon....@gmail.com> wrote:
> tried this option, alas does not work :(

Then a link to your map that shows the problem would let us answer you
more specifically.

Is your map variable global?

-- Larry

CroNiX

unread,

Nov 16, 2010, 2:55:40 PM11/16/10

to Google Maps JavaScript API v3

Did you try setting up a proper event handler in the head of your
document then instead of using [frowned upon] inline code?

google.maps.event.addListener(document.getElementById('your_anchor_id'),
'click', function() {
map.setCenter(new google.maps.LatLng(37.020098,-92.373047));
map.setZoom(4);
});

...

<span id="your_anchor_id">Go to: 37.020098,-92.373047</span>

Yellow Lemon

unread,

Nov 16, 2010, 3:02:30 PM11/16/10

to google-map...@googlegroups.com

Strange is not working: (
Maybe I'm doing something wrong?

Here is the code page:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Map API v3</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng(-33, 151),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>

<body onload="initialize()">
<span onclick="map_canvas.setCenter(new google.maps.LatLng(37.020098,-92.373047));map.setZoom(4);" style="cursor: pointer;">Title</span>
    <div id="map_canvas"></div>
</body>
</html>

geoco...@gmail.com

unread,

Nov 16, 2010, 3:14:48 PM11/16/10

to Google Maps JavaScript API v3

On Nov 16, 12:02 pm, Yellow Lemon <yellowlemon....@gmail.com> wrote:
> Strange is not working: (
> Maybe I'm doing something wrong?
>

Yup. Did you read the posting guidelines (or my request for a link)?

Or the question:

Is your map variable global?

(it isn't)

-- Larry

Yellow Lemon

unread,

Nov 16, 2010, 3:43:48 PM11/16/10

to google-map...@googlegroups.com

Did not understand anything :(

geoco...@gmail.com

unread,

Nov 16, 2010, 4:14:34 PM11/16/10

to Google Maps JavaScript API v3

On Nov 16, 12:43 pm, Yellow Lemon <yellowlemon....@gmail.com> wrote:
> Did not understand anything :(

Read this and make you map variable global:
Javascript Concepts: Scope
http://econym.org.uk/gmap/scope.htm

Change this:
function initialize() {
var map = ...

to:
var map = null;
function initialize() {
map = ...

then this call (which executes in the global context) will work:

<span onclick="map_canvas.setCenter(new
google.maps.LatLng(37.020098,-92.373047));map.setZoom(4);"
style="cursor: pointer;">Title</span>

-- Larry

Yellow Lemon

unread,

Nov 17, 2010, 6:39:47 AM11/17/10

to google-map...@googlegroups.com

It works!
Thanks Larry! :)

Christopher Watson

unread,

Jul 20, 2011, 9:03:13 PM7/20/11

to google-map...@googlegroups.com

hey, yellow lemon, do you have a link to your working example of this,

or can someone tell me whats going wrong with my example?

http://visualisationmagazine.com/mapcenter.htm

sure i have the var map = null outside the function.

be great to re-position the lat lng coordinates through an onClick span.

xelawho

unread,

Jul 21, 2011, 1:52:33 AM7/21/11

to Google Maps JavaScript API v3

> or can someone tell me whats going wrong with my example?

map_canvas.setCenter....

are you sure about that? 'cos I don't see that in the documentation...

Christopher Watson

unread,

Jul 21, 2011, 5:31:45 AM7/21/11

to google-map...@googlegroups.com

I was wondering myself about it, rare i see a usage of underscore. i thought i'd typo'd, partly why i wanted to see the working example.

is it just map.setCenter...

I'd just love to center map through an onlick.

Christopher Watson

unread,

Jul 21, 2011, 5:43:34 AM7/21/11

to google-map...@googlegroups.com

See, you have a rest and then just take out the _canvas and voila!

sorry, just thought to test it. works here: http://visualisationmagazine.com/mapcenter.htm will try remember to leave it up.

use:

<span onclick="map.setCenter(new

google.maps.LatLng(53.581092,-1.483154));map.setZoom(13);"

style="cursor: pointer;">Title</span>

...and make sure its:

var map = null;

function initialize() {

var myOptions = {

zoom: 12,

center: new google.maps.LatLng(37.020098,-92.390047),

mapTypeId: google.maps.MapTypeId.ROADMAP

}

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

}

cheers.

xelawho

unread,

Jul 21, 2011, 8:31:21 AM7/21/11

to Google Maps JavaScript API v3

> ...and make sure its:
>
> var map = null;

don't really know why - it works fine without doing this.

you do know that it could just as easily be a link as a clickable
span, right?

<a href ="javascript:map.setCenter(new
google.maps.LatLng(53.581092,-1.483154));map.setZoom(13);">Title</a>

geoco...@gmail.com

unread,

Jul 21, 2011, 8:38:40 AM7/21/11

to Google Maps JavaScript API v3

On Jul 21, 8:31 am, xelawho <xela...@gmail.com> wrote:
> > ...and make sure its:
>
> > var map = null;
>
> don't really know why - it works fine without doing this.

The "var map" is good practice, it declares the variable in the global
scope. Without that in IE if there is a div with id="map" you will
encounter problems.

Assigning it to null is not technically necessary, but ...

-- Larry

xelawho

unread,

Jul 21, 2011, 9:03:51 AM7/21/11

to Google Maps JavaScript API v3

> Assigning it to null is not technically necessary, but ...

ah, IE. Let's hope they do a better job designing toilets.

thanks for the clarification

Reply all

Reply to author

Forward