JSFiddle - React, Tailwind, and code Playground
by Pavlo
HTML
<script src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>
<div id="map"></div>
CSS
#map {
background-color:red;
width:500px;
height:500px;
}
JavaScript
var map,marker1;
var bounds;
var geocoder;
var location = new google.maps.LatLng(47.857, 35.214);
var center = location;
var addressText1 = "polyakova street 21 Zaporozhye";
var addressText2 = "Dizelnaya street 87 Zaporozhye";
var location1,location2;
var infoWindow;
function initialize() {
var mapOptions = {
center: center,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
}
function addMarkerToMap(location, address) {
var image = "cake2.png"
marker1 = new google.maps.Marker({
map: map,
position: location
});
bounds.extend(location);
// map.fitBounds(bounds);
google.maps.event.addListener(marker1, "click", function () {
infoWindow.open(map, marker1);
});
}
initialize();
infoWindow = new google.maps.InfoWindow({
content: addressText1
})
geocoder.geocode({
address: addressText1
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
location1 = results[0].geometry.location
addMarkerToMap(location1, addressText1);
infoWindow.open(map, marker1);
}
})
geocoder.geocode({
address: addressText2
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK){
infoWindow.setContent("Moving<br/><hr/>From: "+addressText1+ "<br>To:"+addressText2);
location2 = results[0].geometry.location;
var...