JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="google-container" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #google-container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
function initialize() {
var myOptions = {
zoom: 2,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
center: {
lat: 0,
lng: 0
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
};
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("google-container"), myOptions);
var geocoder = new google.maps.Geocoder();
var address = "Seoul";
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
});
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode of " + address + " failed," + status);
}
});
var geocoder2 = new google.maps.Geocoder();
var address2 = "Melbourne";
geocoder2.geocode({
'address': address2
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
});
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode of " + address2 + " failed," + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);