JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
CSS
#map{
width:500px;
height: 500px;
}
JavaScript
var geocoder = new google.maps.Geocoder();
var markersArray = [];
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var postcodes = [
"ул. уральская, д.12, Москва, Россия",
"ул. уральская, д.5, Москва, Россия",
"ул. уральская, д.1, Москва, Россия"
];
var descriptions = [
"Slateford",
"Cortachy",
"Marybank"
];
//create a location object
function location(postalcode, desc){
this.PostalCode = postalcode;
this.Description = desc;
}
//add each location to locations array
var locations = [];
for(var i = 0; i < postcodes.length; i++) {
locations.push(new location(postcodes[i], descriptions[i]));
}
for(var i = 0; i < locations.length; i++) {
GeoCode(locations[i]);
}
function GeoCode(singleLocation){
geocoder.geocode(
{
'address': singleLocation.PostalCode,
'region' : ''
},
function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
//quick and dirty way
bounds.extend(marker.position);
map.fitBounds(bounds);
markersArray[i] = marker;
console.log(markersArray[i]);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(singleLocation.Description);
infowindow.open(map, this); //this refers to the marker
});
} else {
alert("Geocode was not successful for the following reason: " + status);
return false;
}
}
...