Add Custom Google Map Marker
Posted: 07 July 2009 11:46 PM   [ Ignore ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1443
Joined  06-05-2007

I got this code from another site and it works great adding markers to that map from a form, but I need to add a single custom marker to mark the actuall address.  I’m stumped.  Any ideas?


I jacked this from a similar script but it doesnt seem to work

// This function adds the point to the map
    
addMarker : function( p )
    
{
        
// add the marker for the property
        
var pruIcon = new GIcon( G_DEFAULT_ICON );        
        
pruIcon.image = iconImageUrl;  
        
pruIcon.iconSize = new GSize( 22, 28 );              
        
pruIcon.iconAnchor = new GPoint( 4, 28);
        
pruIcon.shadow = ""; //a hack to turn off shadow
        
var markerOptions = { icon : pruIcon };    
        
        
this.listingMarker = new GMarker( p, markerOptions );

        
gmn.neighbourhoodMap.addOverlay( this.listingMarker );
        
gmn.neighbourhoodMap.addControl( new GLargeMapControl() );    
        
gmn.neighbourhoodMap.addControl( new GMapTypeControl() );
        
gmn.neighbourhoodMap.setCenter( p, zoomLevel );
    
}

This is the current code.

[removed]
    
//<![CDATA[
function Markers(color){

// map.closeInfoWindow();
map.getInfoWindow().hide()
   if (
document.getElementById(color).checked==false) { // hide the marker
      
for (var i=0;i<gmarkers.length;i++) {
         
if (gmarkers[i].type==color)  {
            map
.removeOverlay(gmarkers[i]);
         
}
      }
   }
else { // show the marker again
      
for (var i=0;i<gmarkers.length;i++) {
         
if (gmarkers[i].type==color)  {
            map
.addOverlay(gmarkers[i]);
         
}
      }
   }
}
  
//]]>
[removed]    
[removed]
    
//<![CDATA[
GMap.prototype.centerAndZoomOnBounds = function(bounds) {
   
var center_lat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) / 2.0;
   var
center_lng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) / 2.0;
   var
center = new GLatLng(center_lat,center_lng)
   
map.setCenter(center, map.getBoundsZoomLevel(bounds));
}
  
//]]>

[removed]
[removed]
  
//<![CDATA[
// global variables
var gmarkers=[];
var
map;
var
request;
// var bounds = new GBounds(Number.MAX_VALUE, Number.MAX_VALUE, -Number.MAX_VALUE, -Number.MAX_VALUE);
var bounds = new GLatLngBounds();
// Create our "tiny" marker icon
var baseIcon = new GIcon();
baseIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
baseIcon.iconSize = new GSize(12, 20);
baseIcon.shadowSize = new GSize(22, 20);
baseIcon.iconAnchor = new GPoint(6, 20);
baseIcon.infoWindowAnchor = new GPoint(5, 1);
baseIcon.imageMap = [4,0,0,4,0,7,3,11,4,19,7,19,8,11,11,7,11,4,7,0];
baseIcon.transparent = "mapIcons/mm_20_transparent.png";

var
icons=[];

function
coloredRideshareIcon(iconColor) {
   
var color;
   if ((
typeof(iconColor)=="undefined") || (iconColor==null)) {
      color
= "red"
   
} else {
      color
= iconColor;
   
}
   
if (!icons[iconColor]) {
      
var icon = new GIcon(baseIcon);
      
icon.image = "http://labs.google.com/ridefinder/images/mm_20_"+ color +".png";
      
icons[iconColor]=icon;

   
}
   
return icons[iconColor];
}
    

function addMarker(lng, lat, title, iconStr) {
   
var point = new GLatLng(lat, lng);
   
bounds.extend(point);
   var
icon = coloredRideshareIcon(iconStr);
   var
marker = new GMarker(point, icon);
   
gmarkers.push(marker);
   
marker.type = iconStr;
   
GEvent.addListener(marker, "click", function () {
      
// FF 1.5 fix
      
var text = "<div style=\"white-space:nowrap;\"><div align=\"center\" class=\"smalltext\">"+title +"</div></div>";
      
marker.openInfoWindowHtml(text);
   
});
   
map.addOverlay(marker);
}

function processXML() {
   
if (request.readyState == 4) {
      
if (request.status != 200) {
         alert(
"file not found:"+request.status);
         return;
      
}
      
var xmlDoc = request.responseXML;
      if (!
xmlDoc) {
         alert(
"invalid xml file");
         return;
      
}
      markers
= xmlDoc.documentElement.getElementsByTagName("marker");
      for (var
i=0; i < markers.length; i++) {
         
var color= markers[i].getAttribute("icon");
         
addMarker(parseFloat(markers[i].getAttribute("lng")),
                   
parseFloat(markers[i].getAttribute("lat")),
                   
markers[i].getAttribute("title"), color);
     
// since all the markers are loaded by default, make sure all the boxes are checked
         
document.getElementById(color).checked=true;
      
}
      map
.centerAndZoomOnBounds(bounds);
   
}
}
                  
function makeMap() {
   map
= new GMap(document.getElementById("map"));
   
map.addControl(new GLargeMapControl());
   
map.addControl(new GMapTypeControl());
//   map.centerAndZoom(new GPoint(-3.97729, 54.30000), 11);    
   
map.setCenter(new GLatLng(40.72277, -73.946999), 14);

   
request = GXmlHttp.create();
   
request.open("GET", "neighborhood.xml", true);
   
request>
[removed]
 Signature 

Marshall Grant   |  grantmx.com  |  Atlanta, GA   |  design  |  development  |  @grantmx

Profile
 
 
Posted: 08 July 2009 06:45 AM   [ Ignore ]   [ # 1 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  614
Joined  03-05-2008

sorry, not sure what you are trying to do?
Do you have a stored address, that you then want to use to add a marker to a google map and centre the map? or somehting different?

Assuming the above is right, you will need to GeoCOde the address to get the longitude and latitude etc. have a look at this demo supplied on the Google Maps API docs:
http://code.google.com/apis/maps/documentation/examples/geocoding-simple.html

 Signature 

ModeTen Designs - @ModeTen - Stock Photos & Vectors

Profile
 
 
Posted: 08 July 2009 08:55 AM   [ Ignore ]   [ # 2 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1443
Joined  06-05-2007

Did you look at the example?  I’ve already GeoCoded the addresses and they are being displayed via a XML call which correlates to the corresponding check boxes. 

What I need now is to add a snippet of code to display just one custom marker, but I cant seem to get it working.

 Signature 

Marshall Grant   |  grantmx.com  |  Atlanta, GA   |  design  |  development  |  @grantmx

Profile
 
 
Posted: 08 July 2009 11:18 AM   [ Ignore ]   [ # 3 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  614
Joined  03-05-2008

I got this code from another site and it works great adding markers to that map from a form, but I need to add a single custom marker to mark the actuall address.  I’m stumped.  Any ideas?
I jacked this from a similar script but it doesnt seem to work

So you have code that displays mutliple markers from a form… but you need it to return a single address.
Is this a single address from the list?
Is it is single custom address marker?
Is this a single customer marker and the markers from your list?
Is it a single custom marker that has a different graphic or symbol?
Does the map need to centre on the overall points or this new marker your placing?

Its difficult to help not knowing exactly what you are after. and to be honest i am not likely to start reading through all of your code to answer a question that i don;t even understand!

Anyway - the example i supply allows you to present a single marker point. I am now guessing this is not what you are after. Therefore do you want to limit the points from the supplied marker list? If so i would have a look at your process XML function where you loop through and call Add Maker function for each point you want to display. Maybe limit this loop to just 1 cycle.

Do you want to add a single custom point to the list?
Could you add it as par of your XML to keep things simple? Probably not as this might be an external file. If not, then just call the add marker function again manually after processing all the XML! for example (guessing without testing)

function processXML() {
   
if (request.readyState == 4) {
      
if (request.status != 200) {
         alert(
"file not found:"+request.status);
         return;
      
}
      
var xmlDoc = request.responseXML;
      if (!
xmlDoc) {
         alert(
"invalid xml file");
         return;
      
}
      markers
= xmlDoc.documentElement.getElementsByTagName("marker");
      for (var
i=0; i < markers.length; i++) {
         
var color= markers[i].getAttribute("icon");
         
addMarker(parseFloat(markers[i].getAttribute("lng")),
                   
parseFloat(markers[i].getAttribute("lat")),
                   
markers[i].getAttribute("title"), color);
     
// since all the markers are loaded by default, make sure all the boxes are checked
         
document.getElementById(color).checked=true;
      
}

      addMarker
(customLong, customLat, customeTitle, customColor);

      
map.centerAndZoomOnBounds(bounds);
   
}
}
 Signature 

ModeTen Designs - @ModeTen - Stock Photos & Vectors

Profile
 
 
Posted: 08 July 2009 11:35 AM   [ Ignore ]   [ # 4 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1443
Joined  06-05-2007

Thanks Nevsie!

Is this a single address from the list? No. the custom marker is a house and the general markers represent local attractions.

Is it is single custom address marker? Yes.

Is this a single customer marker and the markers from your list? Yes.

Is it a single custom marker that has a different graphic or symbol?  Yes.

Does the map need to centre on the overall points or this new marker your placing?  Needs to center on the marker.  Actually the map is already centered on the correct point.

map.setCenter(new GLatLng(40.72277, -73.946999), 14);

  I just need to place a custom marker there.

 Signature 

Marshall Grant   |  grantmx.com  |  Atlanta, GA   |  design  |  development  |  @grantmx

Profile
 
 
Posted: 08 July 2009 02:34 PM   [ Ignore ]   [ # 5 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  614
Joined  03-05-2008

well in which case i think my code snippet should do it for you, you just need to add the longitude and latitude and for ease use a different colour marker…
In the previous snippet i sent, the second from last line of code is what i added:

addMarker(customLong, customLat, customeTitle, customColor);

replace all the custom elements with your values and you should be fine.

The map set bounds feature will automatically centre and set zoon for the points - so i imagine this not to be a problem.

 Signature 

ModeTen Designs - @ModeTen - Stock Photos & Vectors

Profile
 
 
Posted: 08 July 2009 02:43 PM   [ Ignore ]   [ # 6 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1443
Joined  06-05-2007

Cool.  One more question. Where do I specify the custom marker image?

I seems that its just going to reuse the default marker image specified here:

icon.image = "http://labs.google.com/ridefinder/images/mm_20_"+ color +".png";

I’m looking to add a unique image unlike the others.  Thanks!

 Signature 

Marshall Grant   |  grantmx.com  |  Atlanta, GA   |  design  |  development  |  @grantmx

Profile
 
 
Posted: 09 July 2009 03:49 AM   [ Ignore ]   [ # 7 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  614
Joined  03-05-2008

well if you want to change the icon completly then you will have to not use the addmarker() function as this automatically calls the coloredRideshareIcon() function. For this one off you will either need to modify the functions to allow you to specify a different icon. or just completly manualy write it in for this one off marker.
I have not got the time to rewrite it at the moment - maybe later, but i am pretty snowed now - perhaps someone else who is quicker mght help here?

 Signature 

ModeTen Designs - @ModeTen - Stock Photos & Vectors

Profile
 
 
Posted: 09 July 2009 09:16 AM   [ Ignore ]   [ # 8 ]  
Lab Technician
Avatar
RankRankRankRank
Total Posts:  1443
Joined  06-05-2007

Just figured it out.  Added this code after processing the XML:

var myIcon = new GIcon(G_DEFAULT_ICON);
        
myIcon.image = "my_custom_icon.png";
        
myIcon.iconSize = new GSize(22, 31);
        
myIcon.shadow = "my_custom_icon_shadow.png";
        
myIcon.shadowSize = new GSize(42, 31);
        
myIcon.iconAnchor = new GPoint(10, 29);
        
myIcon.infoWindowAnchor = new GPoint(10, 14);
        
myIcon.printImage = "my_custom_icon_print.gif";
        
myIcon.mozPrintImage = "my_custom_icon_mozPrint.gif";
        
myIcon.printShadow = "my_custom_icon_printShadow.gif";
        
myIcon.transparent = "my_custom_icon_transparent.png";
        
myIcon.imageMap = [ 10,29, 1,16, 0,5, 5,0, 12,4, 18,2, 21,12, 21,16 ];
        
        var
markerOptions = { icon:myIcon };
        
        var
marker = new GMarker(map.getCenter(), markerOptions);
        
GEvent.addListener(marker, "click", function () {
          marker
.openInfoWindowHtml("Hello");
        
});
        
map.addOverlay(marker);

Thanks for all your help Nevsie!

 Signature 

Marshall Grant   |  grantmx.com  |  Atlanta, GA   |  design  |  development  |  @grantmx

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1743, on December 02, 2009 03:47 PM
Total Registered Members: 120532 Total Logged-in Users: 78
Total Topics: 126594 Total Anonymous Users: 39
Total Replies: 665537 Total Guests: 377
Total Posts: 792131    
Members ( View Memberlist )
Newest Members:  Rach123Glenn StavaImfaelSMS!persanulandrewknightKittx77AmityBetbulJahhn