Создание маркера клиента для Карт Google

Question

Я пытаюсь создать новый маркер для булавки, которую я сейчас имею на Картах Google. Я следовал примерам в документации, но я все еще получаю старый красный штырь.

Это код специфичен для всего маркеров:

var myLatLng = new google.maps.LatLng(51.521616, -0.102589); 
var marker = 'marker.png'; 
var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image 
    }); 

Это целая карта сценарий.

google.maps.event.addDomListener(window, 'load', init); 

function init() { 
var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(51.521616, -0.102589), 
    styles: [ {"featureType":"all",  "stylers":[   {"saturation":0},   {"hue":"#e7ecf0"}  ] }, {"featureType":"road",  "stylers":[   {"saturation":-70}  ] }, {"featureType":"transit",  "stylers":[   {"visibility":"on"}  ] }, {"featureType":"poi",  "stylers":[   {"visibility":"off"}  ] }, {"featureType":"water",  "stylers":[   {"visibility":"simplified"},   {"saturation":-60}  ] }] 
}; 

var myLatLng = new google.maps.LatLng(51.521616, -0.102589); 

var mapElement = document.getElementById('map'); 
var map = new google.maps.Map(mapElement, mapOptions); 

var marker = 'marker.png'; 

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

Где я пошла не так? Это связано с другими параметрами карты, которые я добавил?

Я использую API v3 Google Maps

Answer 1

У вас есть опечатка в коде (вы перезаписаны «маркер», который должен быть «образом»). Изменение:

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

To:

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

google.maps.event.addDomListener(window, 'load', init); 
 

 
function init() { 
 
    var mapOptions = { 
 
    zoom: 15, 
 
    center: new google.maps.LatLng(51.521616, -0.102589), 
 
    styles: [{ 
 
     "featureType": "all", 
 
     "stylers": [{ 
 
     "saturation": 0 
 
     }, { 
 
     "hue": "#e7ecf0" 
 
     }] 
 
    }, { 
 
     "featureType": "road", 
 
     "stylers": [{ 
 
     "saturation": -70 
 
     }] 
 
    }, { 
 
     "featureType": "transit", 
 
     "stylers": [{ 
 
     "visibility": "on" 
 
     }] 
 
    }, { 
 
     "featureType": "poi", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }, { 
 
     "featureType": "water", 
 
     "stylers": [{ 
 
     "visibility": "simplified" 
 
     }, { 
 
     "saturation": -60 
 
     }] 
 
    }] 
 
    }; 
 

 
    var myLatLng = new google.maps.LatLng(51.521616, -0.102589); 
 

 
    var mapElement = document.getElementById('map'); 
 
    var map = new google.maps.Map(mapElement, mapOptions); 
 

 
    var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png'; 
 

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

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

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