I am working on a Google Map API V3 code, I am a beginner in JS and I am a little bit confused.
Here is what I am trying to do : I have a database with Lat/Lng, address, a picture, a description.... etc
On my final page, i have 2 maps, one for France, one for Paris. If the lat/lng is in Paris, the marker is on Paris' map, if it's outside paris, it goes on the France map.
So far, I've done exactly what i wanted, but i'm stuck on the infoWindow :( I can open them, but can't close them automatically... I just want to have one infowindow opened at the same time.
Here is my code (just the JS part) :
("mapidf" is for Paris and "mapfr" is for France, and i've removed my attempts with the infowindow which didn't work)
function CreateMarker(marker, map, infowindow, description)
{
google.maps.event.addListener(marker, 'click');
marker.setMap(map);
}
function initialize(ListeDesPoints) {
var mapidfOptions = {
center: { lat: 48.856614, lng: 2.352222},
zoom: 11
};
var mapfrOptions = {
center: { lat: 46.227638, lng: 2.213749},
zoom: 5
};
var mapidf = new google.maps.Map(document.getElementById('maps-idf'),
mapidfOptions);
var mapfr = new google.maps.Map(document.getElementById('maps-fr'),
mapfrOptions);
var infowindow = new Array();
var marker = new Array();
for (var i = 0; i < ListeDesPoints.length; i++)
{
marker[i] = new google.maps.Marker({
position: new google.maps.LatLng (ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
title: ListeDesPoints[i]['address']
});
var max_lat = 48.9602260;
var min_lat = 48.7451930;
var max_lng = 2.6327379;
var min_lng = 2.0946256;
if(ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng)
{
var map = mapfr;
}
else
{
var map = mapidf;
}
infowindow[i] = new google.maps.InfoWindow({content:""})
var description = '<h2>'+ ListeDesPoints[i]['address']+'</h2><img src="'+ListeDesPoints[i]['image']+'" />';
CreateMarker(marker[i], map, infowindow[i], description);
}
}
It's possible that you notice other things I did wrong... please, feel free to criticizes this piece of code :)
Thank you very much
If you want to have one marker per map, create a separate InfoWindow for each map, and associate it with the marker like you do the map.
for (var i = 0; i < ListeDesPoints.length; i++) {
marker[i] = new google.maps.Marker({
position: new google.maps.LatLng(ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
title: ListeDesPoints[i]['address']
});
var max_lat = 48.9602260;
var min_lat = 48.7451930;
var max_lng = 2.6327379;
var min_lng = 2.0946256;
if (ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng) {
var map = mapfr;
var infowindow = infowindowfr;
} else {
var map = mapidf;
var infowindow = infowindowidf;
}
//infowindow[i] = new google.maps.InfoWindow({ content: "" });
var description = '<h2>' + ListeDesPoints[i]['address'] + '</h2><img src="' + ListeDesPoints[i]['image'] + '" />';
CreateMarker(marker[i], map, infowindow, description);
}
code snippet:
function CreateMarker(marker, map, infowindow, description) {
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(description);
infowindow.open(map, this);
});
}
function initialize(ListeDesPoints) {
var mapidfOptions = {
center: {
lat: 48.856614,
lng: 2.352222
},
zoom: 11
};
var mapfrOptions = {
center: {
lat: 46.227638,
lng: 2.213749
},
zoom: 5
};
var mapidf = new google.maps.Map(document.getElementById('maps-idf'),
mapidfOptions);
var mapfr = new google.maps.Map(document.getElementById('maps-fr'),
mapfrOptions);
//var infowindow = new Array();
var infowindowfr = new google.maps.InfoWindow({});
var infowindowidf = new google.maps.InfoWindow({});
var marker = new Array();
for (var i = 0; i < ListeDesPoints.length; i++) {
marker[i] = new google.maps.Marker({
position: new google.maps.LatLng(ListeDesPoints[i]['lat'], ListeDesPoints[i]['lng']),
title: ListeDesPoints[i]['address']
});
var max_lat = 48.9602260;
var min_lat = 48.7451930;
var max_lng = 2.6327379;
var min_lng = 2.0946256;
if (ListeDesPoints[i]['lat'] > max_lat || ListeDesPoints[i]['lat'] < min_lat || ListeDesPoints[i]['lng'] > max_lng || ListeDesPoints[i]['lng'] < min_lng) {
var map = mapfr;
var infowindow = infowindowfr;
} else {
var map = mapidf;
var infowindow = infowindowidf;
}
//infowindow[i] = new google.maps.InfoWindow({ content: "" });
var description = '<h2>' + ListeDesPoints[i]['address'] + '</h2><img src="' + ListeDesPoints[i]['image'] + '" />';
CreateMarker(marker[i], map, infowindow, description);
}
}
//Usage
google.maps.event.addDomListener(window, 'load', function() {
//1.load data
var points = [{
'lat': 48.856614,
'lng': 2.352222,
'address': 'Paris',
'image':'data:image/jpeg;base64,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'
}, {
'lat': 48.85837,
'lng': 2.294481,
'address': 'Eiffel Tower',
'image': 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAaAAACAwEBAAAAAAAAAAAAAAAABAECAwUH/8QALhAAAgICAQEFBQkAAAAAAAAAAAECEQMSIUETMVFhcQQiscHhBSMkMkKBkaHR/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAEDBAIF/8QAHxEBAQEAAgEFAQAAAAAAAAAAAAERAwRxAhIhMUET/9oADAMBAAIRAxEAPwDz5E0CJPQY1JKyuhrRFDwM9Q1GJQivZsc1e7nJP0SjXxZnQYGTQUaURQ8DOiS9ECwNESFFkh4SoUXoKHhWmtcc/s5uKpw57uraXfYjR05rJH7Pp7auKfWmvcfzEKI8G5fKvL8WKURRpQUWR1k0BeiQPWmgajnZFXjOsc+4rqFMY0IcPIMGt8sfws4pLhcd3TX/AB/35iOp0XvJZFLXh5FXkkvp/HqKKBm612Xyvz/c8MlEnU2UCdDTiBZxAYcAED7xlHjHNCrgUTJaMmGLacY13tIZeMthhWWLq0nbV13c/I59VyWn6fm4FCM8ey/XkyxXu88pfX058BDQ6eC+zxWnxKL5fi306cJen7iksesmvDgydS/cauz+VjGBOpqoFtTYyl3ADdwIEeuq8RV4gAabOWMV9qzdj93GOTtJwlrKMFJJcJ3bXRkgR7Fs47YtwTeSaUx58sZuLx5eYJOoK+K5/N15v1Xhy4pR9olOcYzi9vejONNN8/BoAMnU9V/pjX2ZPYusZGgAeiwIcCAAA//Z'
}, {
'lat': 46.227638,
'lng': 2.213749,
'address': 'France',
'image':'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOMAAACXCAMAAADQ4xypAAAAFVBMVEX///8AI5XtKTl0e7fzfYTtESgAAJCDlMQAAAAAp0lEQVR4nO3PNwEAMAADoHT6l1wTOXqAAzJq7krPPrMmjo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Onx0fofSNkUYueUMAAAAASUVORK5CYII='
}, {
'lat': 44.837789,
'lng': -0.57918,
'address': 'Bordeaux',
'image':'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAEAAIDBQYBB//EADYQAAIBAwIEBAQEBAcAAAAAAAECAwAEERIhBRMxQSJRYYEycZGhscHR8AZC4fEUFVJicrLC/8QAGgEAAwEBAQEAAAAAAAAAAAAAAQIDAAQFBv/EACIRAAICAQQCAwEAAAAAAAAAAAABAhEDBBMxQSHwFDJCEv/aAAwDAQACEQMRAD8A0AfyrodvOhA5HenrIcda9WjiCw3rXQc9KGD4p6yECgYIBp4ahxIcU7WKBibXjoKWo1BzK6JPWsEIGcZNKoDJt1rlajAGtD1FcBQdCayvC+KzxyyJex3BGBpJ8QB8qPn4zpwLa2lnJXVnZQPrS7sKtsfanfhF8JAMU7mZ9Ky0nE+MHTyrKJSTg6jk6s9OvWmpd/xBMpaMRKucZUZ/I0j1OFfoZafK/wAms5mxyQAOpNB3fGLW1OjVzX/0x749+lZiWPjd2Ghnn1DOCnLJBx6YGarrmG4tZOW0SHG4AUoB36E0I6nE3SYZafJFW0bNf4gsi6q/MjVh8bp4fcjOPfarASh1DIwKkZBByCK88iuZQfHH9MHy8h6CiLG+kspNcNzLCCRqikU6Dj6+/Sm3ooXab4N3rpUBY3qXtuJYyp7HQ2oZpVZNNWibTTpmbh4xpZmUnOd8yKSPkcZHT7E+dTDjd1FGoUltgnxJ6dvYfjUfDpkiZudpPjQdfPA/9VYw3NsI0bCnSA225HhKflXzuaTi/EbPdxR/qP2oD/zS73YNKNWGyCvbofn601eL3EUaqon08zmOCB19KJlhtJFMelFyI4CMY2BBx7122gtw5dCgDvpbf+Tuv9Km86S8w98FFhb4kVzcVmgZtH+IyX1rlVOG/sKYOLzXkzSSJcs6+HPLUD5faj2swLKN0Lc6OYGIA58OkZz9zQd5aRLdMlshKHmHv1G610YsqlwvbIZcbXL9oWt3GDHLvt4tI9P360tIGW0oAd8ll+f5/SpxZHQ2FRSdxnsSuf8AtvRQtAzMARjP8q7DxH+3tRlnrsMdOn0V2hdWpSFI3yp3/GlV0lmgSR9sKdyzY/ftSofIfQfjxM5Kl3bPq0pKNYc6TpJw2r9PYDFQC9bSIp42iOlE1SLsN8lvbsKs41O4Rz/wcV1ShPLmTQTtjtXVKEWcsZNcAcF6JLmJo2xzLpmxn4VABJPYZwaYtwXgs3DgK96ShZeoGAQPfNTz8KttJkRNIUE5jOM4+1QW9nKxintpSrRMGjMi7qcBgR9am8K6Kbsux99csnDr14mAMcgIwdwxbY/hRqSoJlHLkeR1l0j4Q3h6Z86rmgntLS5V1URy7ySDBOwPc/Oo0u4UjXR4+4/ZoPC2qCs1M1xkEduxTlodIxpXLfCB36b0PPxq2t2KXdyquh8KSnUy9+n76Cs7PxK6ubc2/OeFGGC0J0tj51TtwYLJzHuDIh3Kuu7H1IO9Sjpkh56hvg0V5xC/vm18OS2mt025kkytvjyBOD7Gu1X2rR20HLjUAd2G2d6VdCxUR3L7Lh0YMApHMBYDPXKtj75H386kmjS5iWRVGdOpPM57UqVMZoEN7bInLMuskbKoySP16fWgG4zKU028SRY21Yyf0pUqokiLbAJpZJm1Suzn/cc1CGrtKnFFG7q2etEyzkxjJ7UqVLQUwUzHt0pUqVOKf//Z'}];
initialize(points);
});#maps-fr,
#maps-idf {
height: 240px;
width: 640px;
margin: 0px;
padding: 0px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="maps-fr"></div>
<div id="maps-idf"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加