1

Googleマップv3にさまざまなマーカーを追加するにはどうすればよいですか?

これが私のマーカーの例です：

var latlng = new google.maps.LatLng(lat,lng); 
var image = "../img/hotel_icon.png";
var locationDescription = this.locationDescription;
var marker = new google.maps.Marker({
  map: map,
  position: latlng,
  title:'pk:'+name,
  icon: image
});

bounds.extend(latlng);
setMarkes(map, marker, name, locationDescription);

});//close each
map.fitBounds(bounds);
});//close getjson

}//close initialize
function setMarkes(map, marker, name, locationDescription){
  google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.close();
      infowindow.setContent('<h3>'+name+'</h3><em>'+locationDescription+'</em>');
      infowindow.open(map, marker);
  });

}
4

2 に答える 2

0

役立つかもしれない一例を次に示します: http://www.geocodezip.com/v3_markers_normal_colored_infowindows.html

コードスニペット：

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  setMarkers(map, beaches);
}
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_red.png",
  // This marker is 20 pixels wide by 34 pixels tall.
  new google.maps.Size(20, 34),
  // The origin for this image is 0,0.
  new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.
  new google.maps.Point(9, 34));

function getMarkerImage(iconColor) {
  if ((typeof(iconColor) == "undefined") || (iconColor == null)) {
    iconColor = "red";
  }
  if (!icons[iconColor]) {
    icons[iconColor] = new google.maps.MarkerImage("http://www.geocodezip.com/mapIcons/marker_" + iconColor + ".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0, 0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
  }
  return icons[iconColor];

}
// 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 iconImage = new google.maps.MarkerImage('http://www.geocodezip.com/mapIcons/marker_red.png',
  // This marker is 20 pixels wide by 34 pixels tall.
  new google.maps.Size(20, 34),
  // The origin for this image is 0,0.
  new google.maps.Point(0, 0),
  // The anchor for this image is at 9,34.
  new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.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, 34),
  new google.maps.Point(0, 0),
  new google.maps.Point(9, 34));
// 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 iconShape = {
  coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
  type: 'poly'
};
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

function createMarker(map, latlng, label, html, color) {
  var contentString = '<b>' + label + '</b><br>' + html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    shadow: iconShadow,
    icon: getMarkerImage(color),
    shape: iconShape,
    title: label,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
}

/**
 * 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, "red"],
  ['Coogee Beach', -33.923036, 151.259052, "blue"],
  ['Cronulla Beach', -34.028249, 151.157507, "green"],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, "yellow"],
  ['Maroubra Beach', -33.950198, 151.259302, "orange"]
];

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

  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = createMarker(map, myLatLng, beach[0], beach[0], beach[3]);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
  height: 100%;
  height: 100%;
  padding: 0;
  margin: 0
}

#map_canvas {
  width: 100%;
  height: 100%;
}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

于 2012-06-16T21:47:42.293 に答える
0

私はこれを置くだけで簡単だった問題を解決しました

var currentplace = $("#currentplace").text();
  if(name == currentplace ){image = "../img/hotel_icon.png";}else{ image = "../img/home_icon.png";}
于 2012-06-16T23:58:22.187 に答える