JSFiddle - React, Tailwind, and code Playground
by Pavlo
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<body>
<div id="map-canvas"></div>
</body>
CSS
#map-canvas{
width:50%;
height:50%;
position:absolute;
}
JavaScript
function initialize() {
var drivers = [{
name: 'In Route',
desc: '<h4>teddy johnson | GPS: on <br> tow - light duty wheel lift <br> ETA: 15min | 10:00 AM</h4>',
add: '528 beacon st <br> boston, MA 02215',
lat: 42.366285,
long: -71.135091,
//icon object
icon: {
url: 'https://maps.gstatic.com/intl/en_us/mapfiles/ms2/iconm.png', //path to icon image
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0, 64), //position of the image within a sprite
anchor: new google.maps.Point(25, 25), //position at which to anchor an icon in correspondance to the position of the marker
},
zicon: '',
}, {
name: 'Disablement Location',
desc: '<h4>Teddy Johnson | GPS: On <br> tow - light duty wheel lift <br> ETA: 15min | 10:00 AM</h4>',
add: '528 beacon st <br> boston, MA 02215',
lat: 42.34844,
long: -71.08735,
icon: {
url: 'https://maps.gstatic.com/intl/en_us/mapfiles/ms2/iconm.png', //path to icon image
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(32, 64), //position of the image within a sprite
anchor: new google.maps.Point(25, 25), //position at which to anchor an icon in correspondance to the position of the marker
},
zicon: '',
}, {
name: '',
desc: '<h4>ira toyota</h4>',
add: '29 fairfield st <br> boston, MA 02116',
lat: 42.357025,
long: -71.070547,
icon: {
url: 'https://maps.gstatic.com/intl/en_us/mapfiles/ms2/iconm.png', //path to icon image
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(64, 64), //position of the image within a sprite
anchor: new...