Mini map need smaller marker icons
3,947 views
Skip to first unread message
Marc
Jul 13, 2010, 4:58:40 PM7/13/10
to Google Maps JavaScript API v3
I am using a small map just 250W x 150H. My preferance is to shrink
everything porportionalty but how? Or I have managed to make size
adjustments on everything except the markers. How can I resize the
markers, and remove the shadow. I could put the zoom controls back if
they can be shrink too. Any help would be greatly appreciated. Here is
my code.
<!DOCTYPE doctype PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;}
#map_container {position:relative;margin:1px;}
#map_canvas {width:250px;height:150px;border:1px solid black;}
}
<!--
.style1 {font-size: 14px}
}
.style17 {font-size: 36px}
-->
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var map_center = new google.maps.LatLng(37.3190500, -119.5564800);
var store1 = new google.maps.LatLng(37.321664, -119.563259);
var store2 = new google.maps.LatLng(37.318913, -119.549177);
var store3 = new google.maps.LatLng(37.318088, -119.550151);
var store4 = new google.maps.LatLng(37.315256, -119.563599);
var store5 = new google.maps.LatLng(37.319600, -119.548500);
var myOptions = {
zoom: 14,
center: map_center,
disableDefaultUI: true,
navigationControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker1 = new google.maps.Marker({
position: store1,
map: map,
title:"N1"
});
var marker2 = new google.maps.Marker({
position: store2,
map: map,
title:"N2"
});
var marker3 = new google.maps.Marker({
position: store3,
map: map,
title:"C1"
});
var marker4 = new google.maps.Marker({
position: store4,
map: map,
title:"C2"
});
var marker5 = new google.maps.Marker({
position: store5,
map: map,
title:"J1"
});
google.maps.event.addListener(marker1, 'click', function() {
map.set_center(store1);
map.set_zoom(10);
});
google.maps.event.addListener(marker2, 'click', function() {
map.set_center(store2);
map.set_zoom(10);
});
google.maps.event.addListener(marker3, 'click', function() {
map.set_center(store3);
map.set_zoom(10);
});
google.maps.event.addListener(marker4, 'click', function() {
map.set_center(store4);
map.set_zoom(10);
});
google.maps.event.addListener(marker5, 'click', function() {
map.set_center(store5);
map.set_zoom(10);
});
}
</script>
<center>
<body onload="initialize()"><center>
<div id="map_container">
<div id="map_canvas"></div></div>
</body>
</html>
everything porportionalty but how? Or I have managed to make size
adjustments on everything except the markers. How can I resize the
markers, and remove the shadow. I could put the zoom controls back if
they can be shrink too. Any help would be greatly appreciated. Here is
my code.
<!DOCTYPE doctype PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;}
#map_container {position:relative;margin:1px;}
#map_canvas {width:250px;height:150px;border:1px solid black;}
}
<!--
.style1 {font-size: 14px}
}
.style17 {font-size: 36px}
-->
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var map_center = new google.maps.LatLng(37.3190500, -119.5564800);
var store1 = new google.maps.LatLng(37.321664, -119.563259);
var store2 = new google.maps.LatLng(37.318913, -119.549177);
var store3 = new google.maps.LatLng(37.318088, -119.550151);
var store4 = new google.maps.LatLng(37.315256, -119.563599);
var store5 = new google.maps.LatLng(37.319600, -119.548500);
var myOptions = {
zoom: 14,
center: map_center,
disableDefaultUI: true,
navigationControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker1 = new google.maps.Marker({
position: store1,
map: map,
title:"N1"
});
var marker2 = new google.maps.Marker({
position: store2,
map: map,
title:"N2"
});
var marker3 = new google.maps.Marker({
position: store3,
map: map,
title:"C1"
});
var marker4 = new google.maps.Marker({
position: store4,
map: map,
title:"C2"
});
var marker5 = new google.maps.Marker({
position: store5,
map: map,
title:"J1"
});
google.maps.event.addListener(marker1, 'click', function() {
map.set_center(store1);
map.set_zoom(10);
});
google.maps.event.addListener(marker2, 'click', function() {
map.set_center(store2);
map.set_zoom(10);
});
google.maps.event.addListener(marker3, 'click', function() {
map.set_center(store3);
map.set_zoom(10);
});
google.maps.event.addListener(marker4, 'click', function() {
map.set_center(store4);
map.set_zoom(10);
});
google.maps.event.addListener(marker5, 'click', function() {
map.set_center(store5);
map.set_zoom(10);
});
}
</script>
<center>
<body onload="initialize()"><center>
<div id="map_container">
<div id="map_canvas"></div></div>
</body>
</html>
geoco...@gmail.com
Jul 13, 2010, 10:05:07 PM7/13/10
to Google Maps JavaScript API v3
On Jul 13, 1:58 pm, Marc <mdso...@gmail.com> wrote:
> I am using a small map just 250W x 150H. My preferance is to shrink
> everything porportionalty but how? Or I have managed to make size
> adjustments on everything except the markers. How can I resize the
> markers, and remove the shadow.
Custom markers like these:
> I am using a small map just 250W x 150H. My preferance is to shrink
> everything porportionalty but how? Or I have managed to make size
> adjustments on everything except the markers. How can I resize the
> markers, and remove the shadow.
http://www.geocodezip.com/v3_markers_red.html
or these:
http://www.geocodezip.com/v3_markers_colored.html
or you could even do the "little red dots"
Does that help?
-- Larry
Marc
Jul 14, 2010, 11:22:30 AM7/14/10
to Google Maps JavaScript API v3
Those are huge maps so the markers look little. Here is my map.
http://basslakeca.com/gmap/mapall7.html
Now add 10 markers and you can see thye are too big. I had to remove
the controls too as they were bigger than the map.
In V2 someone had a way to size the marker but I don't know how to
integrate his code into V3 and my scheme.
Here is his code:
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 37.319048778895926, -119.55648422241211),
14);
map.setMapType(G_NORMAL_MAP);
icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
On Jul 13, 7:05 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> > </html>- Hide quoted text -
>
> - Show quoted text -
http://basslakeca.com/gmap/mapall7.html
Now add 10 markers and you can see thye are too big. I had to remove
the controls too as they were bigger than the map.
In V2 someone had a way to size the marker but I don't know how to
integrate his code into V3 and my scheme.
Here is his code:
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 37.319048778895926, -119.55648422241211),
14);
map.setMapType(G_NORMAL_MAP);
icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
On Jul 13, 7:05 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
>
> - Show quoted text -
geoco...@gmail.com
Jul 14, 2010, 1:10:38 PM7/14/10
to Google Maps JavaScript API v3
On Jul 14, 11:22 am, Marc <mdso...@gmail.com> wrote:
> Those are huge maps so the markers look little. Here is my map.http://basslakeca.com/gmap/mapall7.html
They don't look "huge" to me:
> Those are huge maps so the markers look little. Here is my map.http://basslakeca.com/gmap/mapall7.html
http://www.geocodezip.com/basslakeca_com_mappall7a.html
>
> Now add 10 markers and you can see thye are too big. I had to remove
> the controls too as they were bigger than the map.
> In V2 someone had a way to size the marker but I don't know how to
> integrate his code into V3 and my scheme.
You could try looking at the documentation.
-- Larry
Marc
Jul 14, 2010, 2:25:29 PM7/14/10
to Google Maps JavaScript API v3
I am copy and paste guy so the raw documentation is real hard for me.
I did not find and documentation or examples to shrink the icons. It
would be even better if there was code to porportionaly shink the
entire map but I have not found that either.
On Jul 14, 10:10 am, "geocode...@gmail.com" <geocode...@gmail.com>
> > > - Show quoted text -- Hide quoted text -
I did not find and documentation or examples to shrink the icons. It
would be even better if there was code to porportionaly shink the
entire map but I have not found that either.
On Jul 14, 10:10 am, "geocode...@gmail.com" <geocode...@gmail.com>
geoco...@gmail.com
Jul 14, 2010, 2:37:05 PM7/14/10
to Google Maps JavaScript API v3
On Jul 14, 2:25 pm, Marc <mdso...@gmail.com> wrote:
> I am copy and paste guy so the raw documentation is real hard for me.
Sorry. You might have to learn something, you are trying to do
> I am copy and paste guy so the raw documentation is real hard for me.
something new and different from what most other people need.
Have you looked at static maps?
> I did not find and documentation or examples to shrink the icons.
month or two. You could try searching.
> It would be even better if there was code to porportionaly shink the
> entire map but I have not found that either.
enhancement request in the issue tracker, but I would doubt that
enough people would need that to make it of interest to the API team
(but I could be wrong).
-- Larry
Marc
Jul 14, 2010, 2:53:12 PM7/14/10
to Google Maps JavaScript API v3
I certainly don't mind learning but this frankly over my head. I do
well to make adjustments in existing code as well as minor
adaptations. I have looked all over for some examples on Google and
otherwise.
My mini map is used here; http://basslakeca.com/marcslistings.html
I had to remove the controls as they were huge on a small map. I also
hope to add many more properties so the size of the icon is important
or they will overlap so you can see shinking everything is has a
value.
I use "Iframe" for individual maps but they are much bigger.
If you can lead me in the right direction, I would appreciate it.
Marc
On Jul 14, 11:37 am, "geocode...@gmail.com" <geocode...@gmail.com>
well to make adjustments in existing code as well as minor
adaptations. I have looked all over for some examples on Google and
otherwise.
My mini map is used here; http://basslakeca.com/marcslistings.html
I had to remove the controls as they were huge on a small map. I also
hope to add many more properties so the size of the icon is important
or they will overlap so you can see shinking everything is has a
value.
I use "Iframe" for individual maps but they are much bigger.
If you can lead me in the right direction, I would appreciate it.
Marc
On Jul 14, 11:37 am, "geocode...@gmail.com" <geocode...@gmail.com>
Rossko
Jul 14, 2010, 2:57:11 PM7/14/10
to Google Maps JavaScript API v3
> I did not find and documentation or examples to shrink the icons.
The documentaton doesn't mention shrinking, but it does allow you set
any size you like
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Icons
Look in the 'complex' example at how MarkerImage is used
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
....
Marc
Jul 14, 2010, 4:03:29 PM7/14/10
to Google Maps JavaScript API v3
I have tried to insert the code but don't know how to make it work. It
seems that I get nothing or the original sized markers.
My code does not call for a paticular image file so I guess it is
getting the google default. I also have multiple markers so does this
work globably or does it have to be repeated for each marker
My code is below and here is the expample in the documnetation:
DOCUMENTATION
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at
0,32.
new google.maps.Point(0, 32));
MYCODE:
seems that I get nothing or the original sized markers.
My code does not call for a paticular image file so I guess it is
getting the google default. I also have multiple markers so does this
work globably or does it have to be repeated for each marker
My code is below and here is the expample in the documnetation:
DOCUMENTATION
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at
0,32.
new google.maps.Point(0, 32));
MYCODE:
On Jul 14, 11:57 am, Rossko <ros...@culzean.clara.co.uk> wrote:
> > I did not find and documentation or examples to shrink the icons.
>
> The documentaton doesn't mention shrinking, but it does allow you set
> any size you like
> http://code.google.com/apis/maps/documentation/javascript/overlays.ht...
> > I did not find and documentation or examples to shrink the icons.
>
> The documentaton doesn't mention shrinking, but it does allow you set
> any size you like
Rossko
Jul 14, 2010, 8:07:47 PM7/14/10
to Google Maps JavaScript API v3
> I have tried to insert the code but don't know how to make it work.
Where is the map where you tried?
> My code does not call for a paticular image file so I guess it is
> getting the google default.
as per the example. You can of course base your custom marker on
Google's default red lollipop image, which you can get from
http://maps.gstatic.com/intl/en_ALL/mapfiles/marker.png
> I also have multiple markers so does this
> work globably or does it have to be repeated for each marker
marker.
You will of course have to tell each of the markers to use that image,
which is done by setting an option, as seen in the Google icons
example.
Marc
Jul 14, 2010, 8:34:44 PM7/14/10
to Google Maps JavaScript API v3
Ok, I get it. I can photo shop a marker and make it smaller. I am not
sure what happens to a round icon to make it smaller but that is not
the real issue. How can I make all the other controls like zoom
smaller too. I appears that once you make the total size of the map
less than about 300~400 px square the markers, icons, popup boxes,
controls and map style control box to big to fit on small map profile.
Why isnt there a zoom feature that sets all these item with one code
command. This business of having to manipulate each item to set its
size is complex and for me a novice, impossible.
On Jul 14, 5:07 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> > I have tried to insert the code but don't know how to make it work.
>
> Where is the map where you tried?
>
> > My code does not call for a paticular image file so I guess it is
> > getting the google default.
>
> If you want a non-standard size then you must create a custom marker,
> as per the example. You can of course base your custom marker on
> Google's default red lollipop image, which you can get fromhttp://maps.gstatic.com/intl/en_ALL/mapfiles/marker.png
sure what happens to a round icon to make it smaller but that is not
the real issue. How can I make all the other controls like zoom
smaller too. I appears that once you make the total size of the map
less than about 300~400 px square the markers, icons, popup boxes,
controls and map style control box to big to fit on small map profile.
Why isnt there a zoom feature that sets all these item with one code
command. This business of having to manipulate each item to set its
size is complex and for me a novice, impossible.
On Jul 14, 5:07 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> > I have tried to insert the code but don't know how to make it work.
>
> Where is the map where you tried?
>
> > My code does not call for a paticular image file so I guess it is
> > getting the google default.
>
> If you want a non-standard size then you must create a custom marker,
> as per the example. You can of course base your custom marker on
Rossko
Jul 14, 2010, 9:40:45 PM7/14/10
to Google Maps JavaScript API v3
> I can photo shop a marker and make it smaller.
If you like.
Or you can use whatever size image you like and instruct the API to
display it at some other size by using the size option in MarkerImage.
> How can I make all the other controls like zoom
> smaller too.
wanted. This will me more complex than custom markers.
But you must not tinker with Google's logo or the copyright text.
> I appears that once you make the total size of the map
> less than about 300~400 px square the markers, icons, popup boxes,
> controls and map style control box to big to fit on small map profile.
> Why isnt there a zoom feature that sets all these item with one code
> command.
You can lodge feature requests at
http://code.google.com/p/gmaps-api-issues/issues/list
> This business of having to manipulate each item to set its
> size is complex and for me a novice, impossible.
The docs at
http://code.google.com/apis/maps/documentation/javascript/basics.html
says
"This documentation is designed for people familiar with JavaScript
programming and object-oriented programming concepts."
but that needn't stop you learning!
In the meantime you have to balance ambition against capability.
JoshN
Aug 25, 2010, 4:21:08 PM8/25/10
to Google Maps JavaScript API v3
It took me a few ticks to figure this out myself (had checked here
first). Anyways, it seems, to me, that the documentation for scaling
an icon is backwards:
"...To scale the image, whether sprited or not, set the value of
scaledSize to the size of the whole image and set size, origin and
anchor in scaled values..."
I never got this to work properly, but if I do the opposite, set Size
to the actual size ans scaledSize to the on map size, everything works
as I expect. Example where var m is a google.maps.Marker
var image = new google.maps.MarkerImage(
//Path to the image
'styles/images/default.png',
//Image size
new google.maps.Size(32,32),
//Origin, leave 0,0 if not a sprite image
new google.maps.Point(0,0),
//anchor, leave 0,32 if not a sprite image
new google.maps.Point(0, 32),
//The size the image appears on the map
new google.maps.Size(16,16)
);
m.setIcon(image);
Well, I hope this helps with the mini map and with others trying to
scale their icons.
first). Anyways, it seems, to me, that the documentation for scaling
an icon is backwards:
"...To scale the image, whether sprited or not, set the value of
scaledSize to the size of the whole image and set size, origin and
anchor in scaled values..."
I never got this to work properly, but if I do the opposite, set Size
to the actual size ans scaledSize to the on map size, everything works
as I expect. Example where var m is a google.maps.Marker
var image = new google.maps.MarkerImage(
'styles/images/default.png',
//Image size
new google.maps.Size(32,32),
//Origin, leave 0,0 if not a sprite image
new google.maps.Point(0,0),
//anchor, leave 0,32 if not a sprite image
new google.maps.Point(0, 32),
//The size the image appears on the map
new google.maps.Size(16,16)
);
m.setIcon(image);
Well, I hope this helps with the mini map and with others trying to
scale their icons.
Reply all
Reply to author
Forward
0 new messages