Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

get variable value fur use in gmap icon

Posted on 2011-02-25
15
Medium Priority
?
702 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

604 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