google-maps - type - google maps v3 set marker



Google Maps API v3 Sonderziel mit benutzerdefinierten Symbolen (1)

Ich habe eine Seite, die in den Schulen, Kirchen und Parks meines bestimmten Gebiets zieht, aber ich möchte die 3 POIs mit 3 verschiedenen Symbolen gestalten. Ich habe Google und sogar alle Dokumente durchsucht, konnte aber keine Antwort finden.

var map;
var infowindow;

function initialize() {

  // Center of Map
  var centerLatlng = new google.maps.LatLng(29.745376, -95.380125);

  // Marker Icons Declaration
  var icon = new google.maps.MarkerImage("smLinks-twitter.png", null, null, new google.maps.Point(41,47));

  // Map Options
  var myOptions = {
    zoom: 16,
    center: centerLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    icons: icon 
  };

  // Draw the map
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Marker Icons Implementation
  markers = new google.maps.Marker({ 
    position: centerLatlng,
    map: map, 
    title: 'Center of Map', 
    icon: icon 
  });

  // Services: Places
  var request = {
    location: centerLatlng,
    radius: 800,
    types: ["school", "church", "park"]
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.search(request, callback);

} // function initialize()

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: icon
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
    infowindow.open(map, this);
  });
}

Bitte sehen Sie meine schnelle und schmutzige Demo . Die Idee besteht darin, mit dem Array " place.types , welche Art von Bereich der Karte hinzugefügt werden soll. Ich habe dem ersten Element dieses Arrays (normalerweise 2 oder 3 Elemente lang) einen Marker zugewiesen, der ungefähr so ​​aussehen könnte:

["school", "establishment"]

In einigen Fällen kommt "Universität" vor "Schule", so dass ein "Universitäts" -Icon verwendet wird. Sie möchten die Art und Weise verfeinern, in der Sie die Typen den Symbolen zuordnen, also eine Priorität für die Schule oder die Universität geben? Vielleicht durchsuche ich das Array nach den richtigen Typen. Ein Ort (general_contractor) ist nicht in meiner Liste von Symbolen, daher wird die Standard-Stiftmarkierung dort platziert. Ein "Standard" -Symbol könnte verwendet werden, wenn Sie überprüft haben, ob iconType tatsächlich den gewünschten Typ hat oder nicht. Ich werde diese Details dir überlassen =)

Hier ist die Quelle, die ich für Symbole verwendet habe: https://sites.google.com/site/gmapsdevelopment/

function createMarker(place) {
    var placeLoc = place.geometry.location;

    var iconType = {};
    iconType['school'] = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
    iconType['church'] = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
    iconType['park'] = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
    iconType['university'] = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";

    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: iconType[place.types[0]]
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
        infowindow.open(map, this);
    });
}

Alternativ verwenden Sie eine switch-Anweisung:

function createMarker(place) {
    var placeLoc = place.geometry.location;

    var iconUrl;
    switch (place.types[0]) {
    case 'school':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
        break;
    case 'church':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
        break;
    case 'park':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
        break;
    case 'university':
        iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";
        break;
    default:
        iconUrl = "http://maps.google.com/mapfiles/kml/pal4/icon39.png";
    }

    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: iconUrl
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
        infowindow.open(map, this);
    });
}