Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

google map custom icons

Posted on 2009-02-23
10
Medium Priority
?
1,795 Views
Last Modified: 2012-05-06
how to set custom icons on direction ? A to B (using green image A or B). I want to replace with other images for  A and B.
0
Comment
Question by:johndenny
10 Comments
 
LVL 4

Expert Comment

by:ValleyENT
ID: 23717969
0
 
LVL 9

Expert Comment

by:EZFrag
ID: 23719664
Hi there,

I added some example code, if you need it. The example code assumes you already have a map to which you can add the custom icon.

All you need to change though, is the image URL's and the map variable.

Hope it helps ^_^
//Create a new icon
var baseIcon = new GIcon();
 
//Set the image and the shadow of the icon (The shado is optional,
//so if you don't need it, leave it out)
baseIcon.shadow = "/images/shadow.png";
baseIcon.image = "/images/crosshair.png";
 
//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseIcon.shadowSize = new GSize(16, 16);
baseIcon.iconSize = new GSize(16, 16);
 
//Set the anchor point of the new icon (x,y)
baseIcon.iconAnchor = new GPoint(8, 8); // this would be in the middle of the icon
 
//Create new icon options using the option you prepared
//and add additional options as needed
var crossHairOptions = { icon:baseIcon,clickable:false };
 
//Create the custom marker
crossHairMarker = new GMarker(new GLatLng(0,0), crossHairOptions);
 
//Add the custom marker to the map
map.addOverlay(crossHairMarker);

Open in new window

0
 

Author Comment

by:johndenny
ID: 23723026
My issue is how to set for direction start and end icons. So custom icons for start and end. I think your example is for one image at the center of map.
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!

 
LVL 9

Expert Comment

by:EZFrag
ID: 23730739
This particular example is an icon in the middle of the map, but the code can be modified to support two icons.
<script>
 
//Create a new icon
var baseStartIcon = new GIcon();
var baseEndIcon = new GIcon();
 
//Set the image and the shadow of the icon (The shado is optional,
//so if you don't need it, leave it out)
baseStartIcon.shadow = "/images/image.png";
baseStartIcon.image = "/images/image.png";
baseEndIcon.shadow = "/images/image.png";
baseEndIcon.image = "/images/image.png";
 
//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseStartIcon.shadowSize = new GSize(16, 16);
baseStartIcon.iconSize = new GSize(16, 16);
baseEndIcon.shadowSize = new GSize(16, 16);
baseEndIcon.iconSize = new GSize(16, 16);
 
//Set the anchor point of the new icon (x,y)
baseStartIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
baseEndIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
 
//Create new icon options using the option you prepared
//and add additional options as needed
var startIconOptions = { icon:baseStartIcon,clickable:false };
var endIconOptions = { icon:baseEndIcon,clickable:false };
 
//Create the custom marker
startIcon = new GMarker(new GLatLng(0,0), startIconOptions);//Ajust latitude and longitude for required start position
endIcon = new GMarker(new GLatLng(0,0), endIconOptions);//Ajust latitude and longitude for required end position
 
//Add the custom marker to the map
map.addOverlay(startIcon);
map.addOverlay(endIcon);
 
</script>

Open in new window

0
 
LVL 9

Accepted Solution

by:
EZFrag earned 1500 total points
ID: 23730887
I apologize for my lack of knowledge and misunderstanding. I finally caught on that you want to change the default icons of the GDirections object in Google Maps.

When you use GDirections there are constants that is used to store the default icons:

G_START_ICON
G_END_ICON
G_PAUSE_ICON

Basically, you create the icons as the examples show, and then point the created icons to these constants. I have attached new code that should work perfectly. I advise you to do this "icon switch" after you have loaded the GDirections object.

Hope it helps ^_^
//Create a new icon
var baseStartIcon = new GIcon();
var baseEndIcon = new GIcon();
 
//Set the image and the shadow of the icon (The shado is optional,
//so if you don't need it, leave it out)
baseStartIcon.shadow = "/images/image.png";
baseStartIcon.image = "/images/image.png";
baseEndIcon.shadow = "/images/image.png";
baseEndIcon.image = "/images/image.png";
 
//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseStartIcon.shadowSize = new GSize(16, 16);
baseStartIcon.iconSize = new GSize(16, 16);
baseEndIcon.shadowSize = new GSize(16, 16);
baseEndIcon.iconSize = new GSize(16, 16);
 
//Set the anchor point of the new icon (x,y)
baseStartIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
baseEndIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
 
G_START_ICON = baseStartIcon; 
G_END_ICON = baseEndIcon;

Open in new window

0
 

Author Comment

by:johndenny
ID: 23739845
still loading default ones.. A and B not mine:

var map = new google.maps.Map2(document.getElementById('mymap'));
map.addControl(new GLargeMapControl);
map.addControl(new GMapTypeControl());

//Create a new icon
var baseStartIcon = new GIcon();
var baseEndIcon = new GIcon();
 
//Set the image and the shadow of the icon (The shado is optional,
//so if you don't need it, leave it out)
baseStartIcon.shadow = "/images/image1.png";
baseStartIcon.image = "/images/image1.png";
baseEndIcon.shadow = "/images/image2.png";
baseEndIcon.image = "/images/image2.png";
 
//Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
baseStartIcon.shadowSize = new GSize(16, 16);
baseStartIcon.iconSize = new GSize(16, 16);
baseEndIcon.shadowSize = new GSize(16, 16);
baseEndIcon.iconSize = new GSize(16, 16);
 
//Set the anchor point of the new icon (x,y)
baseStartIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
baseEndIcon.iconAnchor = new GPoint(8, 16); // this would be at the middle-bottom of the icon
 
G_START_ICON = baseStartIcon;
G_END_ICON = baseEndIcon;

var dir = new GDirections(map, document.getElementById('mymap'));

dir.load( .... );
0
 

Author Comment

by:johndenny
ID: 23740401
something to do with version of api?
0
 
LVL 9

Assisted Solution

by:EZFrag
EZFrag earned 1500 total points
ID: 23742413
No, just my stupidity.

I did some research on how the real experts are doing it. They don't use the dir.load() function to draw the route. They draw it themselves.

I have added an example below of how they did it. I tested it this time and it is working.

Its unfortunate that the default icons can't be simply be replaced... Would have saved some people alot of time.

Anyway, hope it helps ^_^
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
	<title>Untitled</title>
</head>
<body>
<div style="width:400px;height:300px;" id="mymap"></div> 
 
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAB1Eyaivy_FbdOZt-S-LV1hQx2M7nnPtdT_Lt24udkjBbjaAN6BQ47PsMd5SE3PdLhLBPyYcpfhECdQ"></script>
	<script type="text/javascript">
 
 
      var map;
	  google.load("maps", "2");
	  var dir;
      var baseStartIcon;
      var baseEndIcon;
      
	  function initialize(lat,lng) 
      {     
	     
         //Initialize the Google maps
         map = new google.maps.Map2(document.getElementById("mymap"));   
      	 map.setCenter(new google.maps.LatLng(0,0), 1,G_NORMAL_MAP);        
         map.addControl(new GSmallMapControl());
         map.addControl(new GMapTypeControl());
         
        //Create new icon objects
        baseStartIcon = new GIcon();
        baseEndIcon = new GIcon();
         
        //Set the images of the icons 
         baseStartIcon.image = "smile.png";
         baseEndIcon.image = "smile.png";
 
        //Set the size of the image and the shadow (in pixels, this should be the same size as the images you are using)
        baseStartIcon.iconSize = new GSize(16, 16);
        baseEndIcon.iconSize = new GSize(16, 16);
         
        //Set the anchor point of the new icon (x,y)
        baseStartIcon.iconAnchor = new GPoint(8, 8); // this would be at the center of the icon
        baseEndIcon.iconAnchor = new GPoint(8, 8); // this would be at the center of the icon
        
        //create a new GDirections object with no options
        dir = new GDirections();
        
        //add a load event to the GDirection object
        GEvent.addListener(dir,"load", function() {
        
            //Get the poly line from the GDirections object
            var poly=dir.getPolyline();
            
            //moves the map to center the begining point in the user's view
            //and sets the zoom level
            map.setCenter(poly.getVertex(0),5);//poly.getVertex(0): is the first point of the polyline, the startpoint, 5: is the zoom level
            
            //draw the polyline on the map
            map.addOverlay(poly);
            
            //Draw the custom icons
            //one at the beginning 
            map.addOverlay(new GMarker(poly.getVertex(0),baseStartIcon));
            
            //and one at the end of the polyline
            map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),baseEndIcon));
            
        });
 
        dir.loadFromWaypoints(["San Francisco","Los Angeles"],{getPolyline:true});
         
}      
	  
google.setOnLoadCallback(initialize);
        
</script>
</body>
</html>

Open in new window

0
 

Author Comment

by:johndenny
ID: 23823093
this is actually not directions (address to address), it is pretty much from city to city which is work.
Thanks for help... I have to give you points for help.
0
 

Expert Comment

by:SpinxInc
ID: 24145064
Anybody can help me in this MAP.. ?
I used above script. It's really too good. But i want to put my own dynamic value on click on icon...
Can you please help me ..??
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

581 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