Google Map and MarkerWithLabel.js

by Bianca Kuehweidner

HTML

<script src="https://github.com/googlemaps/v3-utility-library/blob/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
.labels {
    background-color: white;
    border-style: solid;
    border-width: 1px;
}

JavaScript

function initMap() {

            var lat = "-33.890542";
            var lon = "151.274856";
            var latlng = new google.maps.LatLng(lat, lon);

            var myOptions = {
                zoom: 9,
                center: new google.maps.LatLng(lat, lon),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDoubleClickZoom: false,
                draggable: true,
                disableDefaultUI: false,
                navigationControl: true,
                scaleControl: true,
                streetViewControl: true,
                streetViewControl: true
            }

            var mapOfferList = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
            
            
            // Hotellist - just a sample here!!!! Replace with real data!!
            var hotels = [
                ['Hotel A', -33.890542, 151.274856, '99,- €', 'http://hitchhiker.travel', 'http://hitchhiker.travel/website/images/2stars.png', 'http://www.apartum.com/img/trivago/hotel2.jpg'],
                ['Hotel B', -33.923036, 151.259052, '149,- €', 'http://hitchhiker.travel', 'http://hitchhiker.travel/website/images/3stars.png', 'http://www.apartum.com/img/trivago/hotel2.jpg'],
                ['Hotel C', -34.028249, 151.157507, '299,- €', 'http://hitchhiker.travel', 'http://hitchhiker.travel/website/images/4stars.png', 'http://www.apartum.com/img/trivago/hotel2.jpg'],
                ['Hotel D', -33.80010128657071, 151.28747820854187, '399,- €', 'http://hitchhiker.travel', 'http://hitchhiker.travel/website/images/5stars.png', 'http://www.apartum.com/img/trivago/hotel2.jpg'],
                ['Hotel E', -33.950198, 151.259302, '269,- €', 'http://hitchhiker.travel', 'http://hitchhiker.travel/website/images/3stars.png', 'http://www.apartum.com/img/trivago/hotel2.jpg']
            ];


            // Set multiple markers
            for (var i = 0; i < hotels.length; i++) {
                var hotel = hotels[i];
            ...