JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.5.js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div class="coordonnees" style="display:none"></div>
<div class="dessin"></div>
JavaScript
$(document).ready(function() {
width = $(window).width();
height = $(window).height();
var adresse = 'Toulouse';
$('.dessin').html('<div id="carte" style="width:'+width+'px;height:'+height+'px;"></div>');
GMaps.geocode({
address: adresse,
callback: function(results, status) {
if (status == 'OK') {
var result = results[0].geometry.location;
var latitude = result.lat();
var longitude = result.lng();
$('.coordonnees').html('<span class="lat">'+latitude+'</span><span class="lon">'+longitude+'</span>');
map = new GMaps({
el: '#carte',
lat: latitude,
lng: longitude,
zoom: 10,
zoomControl: false,
panControl: false
});
map.setCenter(latitude, longitude);
map.addMarker({
lat: latitude,
lng: longitude
});
}
}
});
$(window).resize(function() {
width = $(window).width();
height = $(window).height();
$('#carte').css({
'width': width,
'height': height
});
latitude = $('.coordonnees .lat').html();
longitude = $('.coordonnees .lon').html();
google.maps.event.trigger(map, 'resize');
map.setCenter(map.getCenter());
})
});