Solved

get variable value fur use in gmap icon

Posted on 2011-02-25
15
698 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
  • 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
links not working 2 27
Aspx calendar pop up control 3 28
Why is my $_POST not going to results page 10 41
center navbar (navigation menu) on web page 3 22
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 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