Alors j'essaie d'apprendre à faire une carte Google. J'ai très peu de compréhension de JavaScript mais j'essaie d'apprendre ici.
J'ai référencé un code en ligne et je suis arrivé au point où je comprends une sorte de comprendre comment ajouter des emplacements, un marqueur et une info-annonce, mais j'essaie de comprendre Comment ajouter plusieurs icônes personnalisées pour chaque marqueur. P>
Merci pour l'aide. P>
function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(37.7749295, -122.4194155),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//add locations
var locations = [
['San Francisco: Power Outage', 37.7749295, -122.4194155],
['Sausalito', 37.8590937, -122.4852507],
['Sacramento', 38.5815719, -121.4943996],
['Soledad', 36.424687, -121.3263187],
['Shingletown', 40.4923784, -121.8891586]
];
//declare marker call it 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow();
//add marker to each locations
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
3 Réponses :
Il existe de multiples façons, le plus facile est de définir la propriété icon du marqueur sur une URL d'une image que vous souhaitez apparaître sous forme de marqueur.
échantillon:
var locations = [
['San Francisco: Power Outage', 37.7749295, -122.4194155],
['Sausalito', 37.8590937, -122.4852507],
['Sacramento', 38.5815719, -121.4943996],
['Soledad', 36.424687, -121.3263187],
['Shingletown', 40.4923784, -121.8891586]
];
Locations represents an array of districts followed by their posicón specifically by its latitude and longitude , so they will be positioned on the map of google , not always latitude and longitude in this way be sent , so you can receive database or json . I hope I've helped.
<div id="map"></div>
<script type="text/javascript">
function initialize() {
//add map, the type of map
var mapOptions = {
zoom: 5,
draggable: true,
animation: google.maps.Animation.DROP,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(51.4964302,-0.1331412), // area location
styles:[{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
//add locations
var locations = [
['London office', 51.4964302,-0.1331412,'http://labs.google.com/ridefinder/images/mm_20_red.png'],
['Sausalito', 37.8590937, -122.4852507,'http://labs.google.com/ridefinder/images/mm_20_red.png'],
['Sacramento', 38.5815719, -121.4943996,'http://labs.google.com/ridefinder/images/mm_20_green.png'],
['Soledad', 36.424687, -121.3263187,'http://labs.google.com/ridefinder/images/mm_20_blue.png'],
['Shingletown', 40.4923784, -121.8891586,'http://labs.google.com/ridefinder/images/mm_20_yellow.png']
];
//declare marker call it 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow();
//add marker to each locations
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>