Solved

get variable value fur use in gmap icon

Posted on 2011-02-25
15
700 Views
Last Modified: 2012-05-11
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
Comment
Question by:lvmllc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
15 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 34984368
What about :

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

Open in new window

0
 
LVL 13

Expert Comment

by:Molnar István
ID: 34996011
//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
 
LVL 13

Expert Comment

by:Molnar István
ID: 34996018
 var myMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        draggable: false,
       clickable: false
    });
0
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 

Author Comment

by:lvmllc
ID: 34996584
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
 
LVL 13

Expert Comment

by:Molnar István
ID: 34997047
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
 

Author Comment

by:lvmllc
ID: 34999764
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
 

Author Comment

by:lvmllc
ID: 34999778
increasing to 500 points
0
 

Author Comment

by:lvmllc
ID: 34999795
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
 
LVL 82

Expert Comment

by:leakim971
ID: 34999808
Could you start by fixing your 404 errors ? :)


Clipboard02.jpg
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35000041
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
 

Author Comment

by:lvmllc
ID: 35000047
Curious if anyone else sees the error leakim971 displayed.  I don't get that error.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35000084
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
 
LVL 13

Accepted Solution

by:
Molnar István earned 500 total points
ID: 35000159
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
 
LVL 13

Expert Comment

by:Molnar István
ID: 35000195
i uploaded the file in html format, replace .html with .php

gmapIconSwap3.html
0
 

Author Comment

by:lvmllc
ID: 35021234
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to implement server side field validation and display customized error messages to the client.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question