• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1947
  • Last Modified:

Google Maps V3, multiple custom markers

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
mugsinc
Asked:
mugsinc
  • 6
  • 5
2 Solutions
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
If you need some icons, a good link : http://sites.google.com/site/gmapicons/home/
0
 
mugsincAuthor Commented:
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
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
leakim971PluritechnicianCommented:
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
 
mugsincAuthor Commented:
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
 
mugsincAuthor Commented:
0
 
leakim971PluritechnicianCommented:
Update line 92 with : icon: customIcons[beach[4]]
0
 
leakim971PluritechnicianCommented:
0
 
mugsincAuthor Commented:
0
 
leakim971PluritechnicianCommented:
OK, correction : line 92 :       
icon: customIcons[beach[4]].icon,

Open in new window


Clipboard06.jpg
0
 
mugsincAuthor Commented:
perfect solution
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now