JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<div id="map"></div>
CSS
#map {
height: 500px;
width: 500px;
}
JavaScript
var map;
var markers = {};
// add marker to object
var posi = new google.maps.LatLng(53.801279, -1.548567);
var name = 'Vince';
markers[name] = {};
markers[name].id = 1;
markers[name].lat = 53.801279;
markers[name].lng = -1.548567;
markers[name].state = 'Online';
markers[name].position = posi;
markers[name].selected = false;
$(document).ready(function () {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(53.801279, -1.548567),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (var key in markers) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[key].lat, markers[key].lng),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, key) {
return function () {
infowindow.setContent(key);
infowindow.open(map, marker);
}
})(marker, key));
}
// Start drag rectangle to select markers !!!!!!!!!!!!!!!!
var shiftPressed = false;
$(window).keydown(function (evt) {
if (evt.which === 16) { // shift
shiftPressed = true;
}
}).keyup(function (evt) {
if (evt.which === 16) { // shift
shiftPressed = false;
}
});
var mouseDownPos, gribBoundingBox = null,
mouseIsDown = 0;
var themap = map;
google.maps.event.addListener(themap, 'mousemove', function (e) {
if (mouseIsDown && shiftPressed) {
if (gribBoundingBox !== null) // box exists
{
var bounds;
if ((e.latLng.jb > mouseDownPos.jb ) && (e.latLng.kb > mouseDownPos.kb)) {
bounds = new google.maps.LatLngBounds(mouseDownPos, e.latLng);
} else if ((e.latLng.jb > mouseDownPos.jb ) && (e.latLng.kb <...