Impossible d'ajouter des marqueurs à google map

YO! 'Sup gens :) Je suis nouveau en html donc je pourrais utiliser un peu d'aide :) J'ai essayé de mettre une carte Google sur le haut de la page, pour être la hauteur spécifique: 500/600px et la largeur: 100%. Pas de problème là-bas. Mais, quand j'essaye d'ajouter plusieurs marqueurs (comme des liens d'URL n 'icônes faites sur commande) ils n'apparaissent pas ... quand j'arrive à ajouter des marqueurs ma barre de recherche disparaît:/Quelqu'un peut-il pls hlp me faire google map avec embarqué barre de recherche autocomplete et quelques marqueurs "lien"? Dis-moi ce que j'ai fait de mal? J'ai cherché une réponse peu ne peut pas sembler le trouver. Merci d'avance ..Impossible d'ajouter des marqueurs à google map

si quelqu'un ne peut pas lire ceci (sry ne sais pas comment formater ce droit) voici le lien vers mon méga avec html. Aucun virus, ne menace pas pls.

<https://mega.co.nz/#!8lAi2I4Q!cPb3XJKccd54Qm8QtnBV2QBWt42KVDFzgI89ZnRCBJo>

Et voici le même code de html:

<html> 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
type="text/javascript"></script> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>     <title>Garinfo</title> 
<style> 
html, body, #map-canvas { 
height: 85%; 
margin: 0px; 
padding: 0px 
} 
.controls { 
margin-top: 16px; 
border: 1px solid transparent; 
border-radius: 2px 0 0 2px; 
-moz-box-sizing: border-box; 
height: 32px; 
outline: none; 
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 
#pac-input { 
background-color: #fff; 
padding: 0 11px 0 13px; 
width: 400px; 
font-family: Roboto; 
font-size: 15px; 
font-weight: 300; 
text-overflow: ellipsis; 
} 
#pac-input:focus { 
border-color: #4d90fe; 
margin-left: -1px; 
padding-left: 14px; /* Regular padding-left + 1. */ 
width: 401px; 
} 
.pac-container { 
font-family: Roboto; 
} 
#type-selector { 
color: #fff; 
background-color: #4d90fe; 
padding: 5px 11px 0px 11px; 
} 
#type-selector label { 
font-family: Roboto; 
font-size: 13px; 
font-weight: 300; 
} 
} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places">   </script> 
<script> 
function initialize() { 
var map = new google.maps.Map(document.getElementById('map-canvas'), { 
center: new google.maps.LatLng(45.242629, 19.827195), 
zoom: 15, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input')); 
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(input); 
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input)); 
google.maps.event.addListener(searchBox, 'places_changed', function() { 
var places = searchBox.getPlaces(); 
if (places.length == 0) { 
return; 
} 
for (var i = 0, marker; marker = markers[i]; i++) { 
marker.setMap(null); 
} 
markers = []; 
var bounds = new google.maps.LatLngBounds(); 
for (var i = 0, place; place = places[i]; i++) { 
var image = { 
url: place.icon, 
size: new google.maps.Size(71, 71), 
origin: new google.maps.Point(0, 0), 
anchor: new google.maps.Point(17, 34), 
scaledSize: new google.maps.Size(25, 25) 
}; 
map.fitBounds(bounds); 
var location1 = new google.maps.Map.LatLng(45.239115, 19.824766) 
var location2 = new google.maps.Map.LatLng(45.244517, 19.847312) 
var marker1 = new google.maps.Marker({ 

position: Location1, 
url: 'http://www.facebook.com/', 
map: map 
    }); 
var marker2 = new google.maps.Marker({ 
position: Location2, 
url: 'http://www.google.com/', 
map: map 
}); 
google.maps.event.addListener(marker, 'click', function() { 
window.location.href = marker.url; 
}); 
markers.push(marker); 
bounds.extend(place.geometry.location); 
} 
}); 
google.maps.event.addListener(map, 'bounds_changed', function() { 
var bounds = map.getBounds(); 
searchBox.setBounds(bounds); 
}); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
#target { 
width: 345px; 
} 
</style> 
</head> 
<body onunload="GUnload()"> 
<script type="text/javascript"> 
var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 15, 
center: new google.maps.LatLng(45.239115, 19.824766), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
var marker = new google.maps.Marker({ 
position: map.getCenter(), 
url: 'http://www.google.com/', 
map: map 
}); 
    google.maps.event.addListener(marker, 'click', function() { 
window.location.href = marker.url; 
}); 
</script> 
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
<div id="map-canvas"></div> 
</body> 
</html>

Source

2014-07-03 user3799813

guy

analizing et tester votre code, je l'ai trouvé au moins 3 problèmes:

1) Vous ajoutez la carte deux fois à la page. Regardez les lignes 69 et 159.

2) Fixer les lignes 112 et 113:

var Location1 = new google.maps.Map.LatLng(45.239115, 19.824766); 
var Location2 = new google.maps.Map.LatLng(45.244517, 19.847312);

Ils ont été portés disparus le ";" et le nom de variable ne correspond pas au nom utilisé dans les marqueurs:

var marker1 = new google.maps.Marker({ 
    position: Location1, //it should be written like this Location1 
    url: 'http://www.facebook.com/', 
    map: map 
}); 

var marker2 = new google.maps.Marker({ 
    position: Location2, //it should be written like this Location2 
    url: 'http://www.google.com/', 
    map: map 
});

3) Les marqueurs ci-dessus (1 et 2) ne sont pas ajoutés. Oui, c'est tre. Cela peut être pour certaines raisons:

3.1) la fonction places_changed sur la ligne 86 n'est peut-être pas appelée;
3.2) places.length vaut peut-être 0, ce qui fait que la méthode retourne sur la ligne 90;

exécutant le code ci-dessus ajoute directement deux marqueurs sans confondre le champ de recherche (je l'ai déplacé à l'extérieur de la fonction places_changed, juste au-dessus, et fixé les erreurs javascript).

Probablement, vous trouverez plus de problèmes, mais cela doit être corrigé avant de continuer.

Source

2014-07-03 03:05:16

J'ai compté les lignes basées sur votre fichier téléchargé via Mega. –

Merci un million! :RÉ – user3799813

Impossible d'ajouter des marqueurs à google map

Répondre

Questions connexes