Markersymbol aus Markierungsdatensatz abrufen

Question

Ich mache eine Website mit Google Maps API v3. Markierungen hinzugefügt werden in die Karte mit Attributen von Markerdaten werden

Marker Daten gesetzt

var markerData = [ 
    "lat": '21.0236081', 
    "long": '105.789596', 
    "icon": 'http://i.imgur.com/0Js6A7w.gif', 
    "description": 'blah blah' 
]; 

Pin Markierung auf der Karte

for (var i = 0; i < markerData.length; i++) { 
    var data = markerData[i]; 
    var myLatLng = new google.maps.LatLng(data.lat, data.long); 
    var image = "'" + data.icon + "'"; 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     icon: image 
    }); 
    (function (marker, data) { 
     google.maps.event.addListener(marker, "click", function (e) { 
      infoWindow.setContent(data.description); 
      infoWindow.open(map, marker); 
     }); 
    })(marker, data); 
    markerList.push(marker); 
} 

genommen, die ich nicht auf den Link bekommen könnte um 'Icon' Attribute meiner Marker zu setzen. Kann mir jemand einen Rat geben?

Danke euch allen !!

Answer 1

Sie Marker haben eine Reihe von Tippfehler in Ihrem Code:

1. markerData sollte ein Array von Gegenständen, die lat und long Eigenschaften sollten Zahlen :

var markerData = [{ 
    "lat": 21.0236081, 
    "long": 105.789596, 
    "icon": "http://maps.google.com/mapfiles/ms/micons/blue.png", // 'http://i.imgur.com/0Js6A7w.gif', 
    "description": 'blah blah' 
}]; 

2. Sie die map Eigenschaft des Markers zu Ihrem map Objekt festlegen müssen:

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    icon: image, 
    map: map 
}); 

3. Sie zusätzliche haben Anführungszeichen um Ihr Symbol:

var image = "'" + data.icon + "'"; 

s hould sein:

var image = data.icon; 

(data.icon ist bereits eine Zeichenfolge)

proof of concept fiddle

Codefragment:

var geocoder; 
 
var map; 
 
var markerList = []; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var markerData = [{ 
 
    "lat": 21.0236081, 
 
    "long": 105.789596, 
 
    "icon": "http://maps.google.com/mapfiles/ms/micons/blue.png", // 'http://i.imgur.com/0Js6A7w.gif', 
 
    "description": 'blah blah' 
 
    }]; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < markerData.length; i++) { 
 
    var data = markerData[i]; 
 
    var myLatLng = new google.maps.LatLng(data.lat, data.long); 
 
    var image = data.icon; 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     icon: image, 
 
     map: map 
 
    }); 
 
    (function(marker, data) { 
 
     google.maps.event.addListener(marker, "click", function(e) { 
 
     infoWindow.setContent(data.description); 
 
     infoWindow.open(map, marker); 
 
     }); 
 
    })(marker, data); 
 
    markerList.push(marker); 
 
    bounds.extend(myLatLng); 
 
    if (markerList.length > 1) map.fitBounds(bounds) 
 
    else map.setCenter(myLatLng); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

Sie müssen Kartenobjekt passieren

var marker = new google.maps.Marker({ // put a marker on map 
       position: {lat:lat, lng:lng}, 
       map: map, 
       icon: iconURL 
    }