Solved

Google Maps V3, multiple custom markers

Posted on 2011-02-23
11
1,843 Views
Last Modified: 2012-05-11
how can i add multiple custom markers to the code below, i want to add cafe to the same map with a different icon
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }

Open in new window

0
Comment
Question by:mugsinc
  • 6
  • 5
11 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 34960336
using :

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4, "picType1"],
  ['Coogee Beach', -33.923036, 151.259052, 5, "picType2"],
  ['Cronulla Beach', -34.028249, 151.157507, 3, "picType3"],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "picType2"],
  ['Maroubra Beach', -33.950198, 151.259302, 1, "picType3"]
];

Open in new window


and :

    var customIcons = {
            "picType1": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType2": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType3": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
    };

Open in new window


so finally replace line 65 :
 icon: image,

Open in new window

by :  
icon: beach[4],

Open in new window


0
 
LVL 82

Expert Comment

by:leakim971
ID: 34960339
If you need some icons, a good link : http://sites.google.com/site/gmapicons/home/
0
 
LVL 1

Author Comment

by:mugsinc
ID: 34966845
i tried your solution and the markers do not load, what am i doing wrong
<script type="text/javascript"> 
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
 
  setMarkers(map, beaches);
}
 
/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4,"picType1"],
  ['Coogee Beach', -33.923036, 151.259052, 5,"picType2"],
  ['Cronulla Beach', -34.028249, 151.157507, 3,"picType1"],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2,"picType1"],
  ['Maroubra Beach', -33.950198, 151.259302, 1,"picType2"]
];
 
 

 
function setMarkers(map, locations) {  

var customIcons = {
            "picType1": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType2": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType3": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
    };
  // Add markers to the map
 
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
 
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: beach[4],
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
</script>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 34966917
what is locations line 78 ?

Your initial array of data is beaches and not locations

I was thinking you do a job somewhere...

Replace line 77 and 78 by :


for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];

Open in new window

0
 
LVL 1

Author Comment

by:mugsinc
ID: 34966951
sorry this is the right one, but it still does not work
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Complex Icons</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
 
  setMarkers(map, beaches);
}
 
/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4,"picType1"],
  ['Coogee Beach', -33.923036, 151.259052, 5,"picType2"],
  ['Cronulla Beach', -34.028249, 151.157507, 3,"picType1"],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2,"picType1"],
  ['Maroubra Beach', -33.950198, 151.259302, 1,"picType2"]
];
 
 

 
function setMarkers(map, locations) {  

var customIcons = {
            "picType1": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType2": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType3": {
                    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
    };
  // Add markers to the map
 
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
 
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: beach[4],
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}
</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div> 
</body> 
</html>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

by:mugsinc
ID: 34966979
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34966993
Update line 92 with : icon: customIcons[beach[4]]
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34967025
0
 
LVL 1

Author Comment

by:mugsinc
ID: 34967060
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 34967068
OK, correction : line 92 :       
icon: customIcons[beach[4]].icon,

Open in new window


Clipboard06.jpg
0
 
LVL 1

Author Closing Comment

by:mugsinc
ID: 34967073
perfect solution
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

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

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now