Text Overlay

1,428 views
Skip to first unread message

pds

unread,
Oct 31, 2010, 6:50:18 PM10/31/10
to Google Maps JavaScript API v3
Hi,
I wish to add street and place names to my maps so they look and
behave in the same way as those on the native maps and only appear at
a set zoom level.
Help please.
peter

Rossko

unread,
Nov 1, 2010, 4:35:21 AM11/1/10
to Google Maps JavaScript API v3
> I wish to add street and place names to my maps so they look and
> behave in the same way as those on the native maps and only appear at
> a set zoom level.

How are you implementing your maps? What is a 'native' map?

pds

unread,
Nov 1, 2010, 4:47:32 AM11/1/10
to Google Maps JavaScript API v3
Thanks for the reply, The native map is Google maps implemented by:

<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(31.620833333,-7.98222222 ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:true,
streetViewControl: false,
scaleControl:true,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
}
};

var map = new google.maps.Map(document.getElementById("map_google"),
myOptions);
setMarkers(map, riads);
}

var riads = [
['Riad Assakina', 31.620845000,-7.98228000, 5 , 'images/villa.png' ]
];

function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var riad = locations[i];
var myLatLng = new google.maps.LatLng(riad[1], riad[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: riad[4],
title: riad[0],
zIndex: riad[3]
});
}
}
</script>

with

<div id="map_google" style="width:570px; height:470px; margin: -505px
auto 0px 253px; "></div>

Rossko

unread,
Nov 1, 2010, 6:28:03 AM11/1/10
to Google Maps JavaScript API v3
Okeydokey ; but how are you implementing "your maps" ; are they tiled
imagery or something? Or do you mean you want to add street label
overlays over the top of the standard maps?

pds

unread,
Nov 1, 2010, 6:59:08 AM11/1/10
to Google Maps JavaScript API v3
Thanks again - I want to add street label overlays over the top of the
standard maps.

Peter

Rossko

unread,
Nov 1, 2010, 8:02:16 AM11/1/10
to Google Maps JavaScript API v3
> Thanks again - I want to add street label overlays over the top of the
> standard maps.

If you just want simple labels, like text in a div, you could create a
custom label class based on OverlayView
http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView
You could code to hide/show labels at different zooms.

If you want something fancier, like text that follows the angles of
the streets, you'll probably have to provide a tiled image overlay
that is mostly transparent apart from the text. That does easily
allow for different labels at different zooms.

pds

unread,
Nov 1, 2010, 2:56:52 PM11/1/10
to Google Maps JavaScript API v3


On Nov 1, 12:02 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> > Thanks again - I want to add street label overlays over the top of the
> > standard maps.
>
> If you just want simple labels, like text in a div, you could create a
> custom label class based on OverlayViewhttp://code.google.com/apis/maps/documentation/javascript/reference.h...
> You could code to hide/show labels at different zooms.
>
> If you want something fancier, like text that follows the angles of
> the streets, you'll probably have to provide a tiled image overlay
> that is mostly transparent apart from the text.  That does easily
> allow for different labels at different zooms.

Thanks Rossko for your help. Having looked at both options I am going
to go for a tiled image overlay.
Peter
Reply all
Reply to author
Forward
0 new messages