• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 705
  • Last Modified:

get variable value fur use in gmap icon

I have a map that adds a marker to the page using the icon I called iconBlue. the following works just fine.

marker = new GMarker(addressCenter, {icon:iconBlue, draggable: false, clickable: false});

However I want to store the name of the icon in a variable and pass it to the marker. I have tried the following but it will not work

vma = 'iconBlue';
marker = new GMarker(addressCenter, {icon:vma, draggable: false, clickable: false});
0
lvmllc
Asked:
lvmllc
  • 6
  • 5
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
What about :

vma = 'iconBlue';
myicon = { icon:vma, draggable: false, clickable: false };
marker = new GMarker(addressCenter, myicon);

Open in new window

0
 
Molnar IstvánHelpDesk / ProgrammerCommented:
//version 2
 var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
...
var IconBlue = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "the_path_of_the_icon"; //for ex: http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png
markerOptions = { icon:blueIcon, draggable: false, clickable: false };
....
var latlng = new GLatLng(-33.890542, 151.274856);
var myMarker=new GMarker(latlng, markerOptions);
map.addOverlay(myMarker);

//version 3
var mymapOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  mymapOptions);
...
    var image = 'the_path_of_the_icon';//for ex: http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png
    var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
    var myMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });

hope it helps
0
 
Molnar IstvánHelpDesk / ProgrammerCommented:
 var myMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        draggable: false,
       clickable: false
    });
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
lvmllcAuthor Commented:
So far no luck with that.
I posted a sample at
http://www.landvizmedia.net/testFiles/gmapIconSwap.php

it stays on green.  if I try and replace iconGreen  with the var iconImage it fails
0
 
Molnar IstvánHelpDesk / ProgrammerCommented:
here is a similar example:
http://econym.org.uk/gmap/example_map2.htm

i'm not sure, but i think the problem is that you set your markers icon to green, and therefor displays always green icon:
...
  marker = new GMarker(addressCenter, {
        icon:iconGreen, <=have you tried with "iconImage" instead of iconGreen ?
        bounce:false,
        draggable: true,
        title: iconFeature,
        clickable: true
        });
...
0
 
lvmllcAuthor Commented:
yes, tried it with iconImage and I get an error.

  myicon = { icon:iconImage, draggable: false, clickable: false };
  marker = new GMarker(addressCenter, myicon);

See http://www.landvizmedia.net/testFiles/gmapIconSwap3.php

for an example with the iconImage and the error created
0
 
lvmllcAuthor Commented:
increasing to 500 points
0
 
lvmllcAuthor Commented:
I should mention that it does place the comment in the DB, so that part works. It all has to do with displaying iconImage
0
 
leakim971PluritechnicianCommented:
Could you start by fixing your 404 errors ? :)


Clipboard02.jpg
0
 
leakim971PluritechnicianCommented:
Try to declare your icons as global variables/objects. Currently they're inside the function.
var iconRed = new GIcon();
  iconRed.image = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_red.png';
  iconRed.shadow = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_shadow.png';
  iconRed.iconSize = new GSize(12, 20);
  iconRed.shadowSize = new GSize(22, 20);
  iconRed.iconAnchor = new GPoint(6, 20);
  iconRed.infoWindowAnchor = new GPoint(6, 10);
  
  
  var iconYellow = new GIcon();
  iconYellow.image = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_yellow.png';
  iconYellow.shadow = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_shadow.png';
  iconYellow.iconSize = new GSize(12, 20);
  iconYellow.shadowSize = new GSize(22, 20);
  iconYellow.iconAnchor = new GPoint(6, 20);
  iconYellow.infoWindowAnchor = new GPoint(6, 10);
  
  
  var iconGreen = new GIcon();
  iconGreen.image = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_green.png';
  iconGreen.shadow = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_shadow.png';
  iconGreen.iconSize = new GSize(12, 20);
  iconGreen.shadowSize = new GSize(22, 20);
  iconGreen.iconAnchor = new GPoint(6, 20);
  iconGreen.infoWindowAnchor = new GPoint(6, 10);
  
  
  var iconBlue = new GIcon();
  iconBlue.image = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_blue.png';
  iconBlue.shadow = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_shadow.png';
  iconBlue.iconSize = new GSize(12, 20);
  iconBlue.shadowSize = new GSize(22, 20);
  iconBlue.iconAnchor = new GPoint(6, 20);
  iconBlue.infoWindowAnchor = new GPoint(6, 10);



//create a marker
function storeMarker() {

Open in new window

0
 
lvmllcAuthor Commented:
Curious if anyone else sees the error leakim971 displayed.  I don't get that error.
0
 
leakim971PluritechnicianCommented:
Don't worry about them. It's better like that, else we're gonna to have two jquery lib in the page...
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery.min.js"></script>

Open in new window

0
 
Molnar IstvánHelpDesk / ProgrammerCommented:
i created a new marker with the help of iconImage
...
//This does work but the icon is stuck as iconGreen
 var icncolor = new GIcon();
  icncolor.image = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_'+iconImage.substring(4,iconImage.length)+'.png';
  icncolor.shadow = 'http://isueced09.design.iastate.edu/images/mapIcons/gMap/mm_20_shadow.png';
  icncolor.iconSize = new GSize(12, 20);
  icncolor.shadowSize = new GSize(22, 20);
  icncolor.iconAnchor = new GPoint(6, 20);
  icncolor.infoWindowAnchor = new GPoint(6, 10);
  
  marker = new GMarker(addressCenter, {
	  icon:icncolor, 
	  bounce:false,
	  draggable: true, 
	  title: iconFeature,
	  clickable: true
	  });

Open in new window

0
 
Molnar IstvánHelpDesk / ProgrammerCommented:
i uploaded the file in html format, replace .html with .php

gmapIconSwap3.html
0
 
lvmllcAuthor Commented:
Bravo quicksilver 17!  That works great.

to extend to icons that have different shapes/sizes I will add in a lookup to a DB or external file.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now