JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
<div class="sth" onmouseover="hover(1)" onmouseout="out(1)">MARKER 1</div>
<div class="sth2" onmouseover="hover(2)" onmouseout="out(2)">MARKER 2</div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}

.sth  {
    position:absolute;
    top: 100px;
    left:100px;
    height:50px;
    width:50px;
    background-color:red;
}
.sth2  {
    position:absolute;
    top: 100px;
    left:200px;
    height:50px;
    width:50px;
    background-color:red;
}

JavaScript

var map;
var icon1 = "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Bubble-Azure-icon.png";
var icon2 = "http://www.clker.com/cliparts/U/8/J/z/5/D/google-maps-icon-blue-th.png";
var allMarkers = [];

google.maps.event.addDomListener(window, "load", function () {

  //Create the map
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  //Create the marker 1
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    id: 1,
    icon: icon1,
    title: "some marker"
  });

	//Add it to allMarkers
  allMarkers.push(marker1);

  //Create the marker 2
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(33.808678, -117.928921),
    map: map,
    id: 2,
    icon: icon1,
    title: "TEEEEEEST"
  });

	//Add it to allMarkers
  allMarkers.push(marker2);
});

//Function called when hover the div
function hover(id) {
  for ( var i = 0; i< allMarkers.length; i++) {
    if (id === allMarkers[i].id) {
      allMarkers[i].setIcon(icon2);
      break;
    }
  }
}

//Function called when out the div
function out(id) {
  for ( var i = 0; i< allMarkers.length; i++) {
    if (id === allMarkers[i].id) {
      allMarkers[i].setIcon(icon1);
      break;
    }
  }
}