JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&language=en"></script>
<div id="map_canvas"></div>
<div id="info"></div>
CSS
#map_canvas {
margin: 0px;
padding: 0px;
width:500px;
height:500px;
}
JavaScript
var map = null;
var layers = [];
var geocoder = null;
function initialize() {
geocoder = new google.maps.Geocoder();
//Check if browser supports W3C Geolocation API
var lat = 50;
var long = 0;
var myLatLng = new google.maps.LatLng(lat,long);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// alert('Your latitude is '+lat+' and longitude is '+long);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infoWindow = new google.maps.InfoWindow({});
function openIW(FTevent) {
infoWindow.close();
document.getElementById('info').innerHTML = "openIW<br>"+FTevent.latLng+"<br>"+FTevent.pixelOffset;
infoWindow.setOptions(
{
content: FTevent.featureData.infoWindowHtml,
position: FTevent.latLng,
pixelOffset: FTevent.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addListener(map, "click", function() { infoWindow.close();});
// alert('map geladen?');
layers[0] = new google.maps.KmlLayer({
url:'http://joomla.goodandgreenguides.com/index.php?option=com_form2contentkmlfeeds&task=kmlfeed.display&view=kmlfeed&format=raw&id=1',
preserveViewport: true,
suppressInfoWindows: false,
map: map});
layers[1] = new google.maps.KmlLayer({
url:'http://joomla.goodandgreenguides.com/index.php?option=com_form2contentkmlfeeds&task=kmlfeed.display&view=kmlfeed&format=raw&id=2',
preserveViewport: true,
suppressInfoWindows: true,
map: map});
layers[2] = new google.maps.KmlLayer({
url: 'http://joomla.goodandgreenguides.com/index.php?option=com_form2contentkmlfeeds&task=kmlfeed.display&view=kmlfeed&format=raw&id=3',
preserveViewport: true,
suppressInfoWindows: true,
map: map});
layers[3] = new google.maps.KmlLayer({
...