JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Complex Icons</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
#map_canvas img{
background:none;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD7CTlQf6lNxqG7VU0ZHJ0mDTmlLsckVDo&sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var tam = [16.3,108];
var toado = [[16.5,108.5,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
[16.3,108,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
[16,107,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"],
[23,105,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q"]];
var markers = [];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(tam[0], tam[1]),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < toado.length; i++) {
var beach = toado[i];
urlimg = beach[2];
var image = new google.maps.MarkerImage(
urlimg,
null,
null,
null,
new google.maps.Size(15, 15));
var myLatLng = new google.maps.LatLng(beach[0], beach[1]);
markers[i] = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
draggable :...