Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Google Map</title>
    <link rel="stylesheet" href="Styles/style.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXan-qoXD0Cl29_Uw7XcRDMshvJ3d3pqc"></script>
    <script type="text/javascript">
    window.onload = function()
    {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOption = {
            mapTypeControl: false,
            center: new google.maps.LatLng(5.416737,100.333662),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var georgetown = new google.maps.LatLng(5.416737,100.333662);

        var infowindow = new google.maps.InfoWindow();

        var map = new google.maps.Map(document.getElementById("map"), mapOption);

        var latlng1 = new google.maps.LatLng(5.416737,100.333662);
        var marker1 = new google.maps.Marker({
        	position: latlng1,
        	animation: google.maps.Animation.DROP,
        	maxheight: 50,
        	maxwidth: 250,
        	map: map,
        });

        var info1 = '<div id="h3">Kota Dine & Coffee</div>' + '<p>Operating hours</p>' +
                    '<p1>Sunday - Saturday</p1> <p2>10:30AM - 10:30PM</p2>' +
                    '<p>Address</p>' + '<p1>Georgetown, 10200 George Town, Penang</p1>' +
                    '<p>Tel</p>' + '<p1>04-371 4929</p1>';

        google.maps.event.addListener(marker1, 'click', function()
            {
                infowindow.close();
                map.setZoom(15);
                map.setCenter(marker1.getPosition());
                infowindow.setContent(info1);
                infowindow.open(map, marker1);
            });
        //======================================================================================================================================
        var latlng2 = new google.maps.LatLng(5.4185, 100.3395);
        var marker2 = new google.maps.Marker({
        	position: latlng2,
        	animation: google.maps.Animation.DROP,
        	map: map
        });

        var info2 = '<div id="h3">Chai Diam Ma</div>' + '<p>Operating hours</p>' +
                    '<p1>Tuesday - Saturday</p1> <p2 style="text-align: center">12:00PM - 9:00PM</p2> <br> <p1>Sunday</p1>						<p2 style="text-align: center">12:00PM - 6:00PM</p2> <br> <p1>Monday</p1> <p2 style="text-align: center">Closed</p2>' +
                    '<p>Address</p>' + '<p1>15, Lebuh Queen, George Town, 10200 George Town, Penang</p1>' +
                    '<p>Tel</p>' + '<p1>016-431 4452</p1>'

        google.maps.event.addListener(marker2, 'click', function()
            {
                infowindow.close();
                infowindow.setContent(info2);
                infowindow.open(map, marker2);
            });
 		//======================================================================================================================================
        var latlng3 = new google.maps.LatLng(5.4154, 100.3397);
        var marker3 = new google.maps.Marker({
        	position: latlng3,
        	animation: google.maps.Animation.DROP,
        	maxheight: 50,
        	maxwidth: 250,
        	map:map
        });

        var info3 = '<div id="h3">Black Kettle</div>' + '<p>Operating hours</p>' +
                    '<p1>Sunday - Thursday</p1> <p2 style="text-align: center">10:00AM - 11:30PM</p2> <br> <p1>Friday - Saturday</p1>			<p2 style="text-align: center">10:00AM - 12:00AM</p2>' +
                    '<p>Address</p>' + '<p1>105, Beach St, Georgetown, 10300 George Town, Penang</p1>' + '<p>Tel</p>' + '<p1>04-251 9270</p1>'

        google.maps.event.addListener(marker3, 'click', function()
            {
                infowindow.close();
                map.setZoom(15);
                map.setCenter(marker1.getPosition());
                infowindow.setContent(info3);
                infowindow.open(map, marker3);
            });
        //======================================================================================================================================
        var latlng4 = new google.maps.LatLng(5.4165, 100.3252);
        var marker4 = new google.maps.Marker({
        	position: latlng4,
        	animation: google.maps.Animation.DROP,
        	map: map
        });

        var info4 = '<div id="h3">Kraffmen</div>' + '<p>Operating hours</p>' +
                    '<p1>Sunday - Saturday</p1> <p2 style="text-align: center">8:00AM - 10:00PM</p2>' +
                    '<p>Address</p>' + '<p1>George Town, 80, Jalan Zainal Abidin, George Town, 10400 George Town, Penang</p1>' + '<p>Tel<p>' +
                    '<p1>04-226 2770</p1>'

        google.maps.event.addListener(marker4, 'click',function()
            {
                infowindow.close();
                map.setZoom(15);
                map.setCenter(marker1.getPosition());
                infowindow.setContent(info4);
                infowindow.open(map, marker4);
            });
 		//======================================================================================================================================
        var latlng5 = new google.maps.LatLng(5.4237, 100.3338);
        var marker5 = new google.maps.Marker({
        	position: latlng5,
        	animation: google.maps.Animation.DROP,
        	maxheight: 50,
        	maxwidth: 250,
        	map: map
        });

        var info5 = '<div id="h3">Dan Cafe</div>' + '<p>Operating hours</p>' + '<p1>Monday - Saturday</p1> 												 <p2 style="text-align: center">1:00PM - 10:00PM</p2> <br> <p1>Sunday</p1> <p2 style="text-align: center">Closed</p2>' +
                    '<p>Address</p>' + '<p1>George Town, 38/1, Lebuh Farquhar, George Town, 10200 George Town, Penang</p1>' + '<p>Tel</p>' +
                    '<p>04-251 9415</p>'

        google.maps.event.addListener(marker5, 'click', function()
            {
                infowindow.close();
                map.setZoom(15);
                map.setCenter(marker1.getPosition());
                infowindow.setContent(info5);
                infowindow.open(map, marker5);
            });
 		//======================================================================================================================================
        var latlng6 = new google.maps.LatLng(5.4143, 100.3400);
        var marker6 = new google.maps.Marker({
        	position: latlng6,
        	animation: google.maps.Animation.DROP,
        	map: map
        });

        var info6 = '<div id="h3">Lavish Fusion Bakery</div>' + '<p>Operating hours</p>' + 																'<p1>Sunday</p1> <p2 style="text-align: center">9:00AM - 11:30PM</p2> <br> 															 <p1>Monday - Thursday</p1> <p2 style="text-align: center">10:00AM - 11:30PM</p2> <br> 												 <p1>Friday</p1> <p2 style="text-align: center">10:00AM - 12:00AM</p2> <br> 														 <p1>Saturday</p1> <p2 style="text-align: center">9:00AM - 12:00AM</p2>' +
                    '<p>Address</p>' + '<p1>214, Lebuh Victoria, George Town, 10300 George Town, Penang</p1>' + '<p>Tel</p>' +
                    '<p1>04-261 0107</p1>'

        google.maps.event.addListener(marker6, 'click', function()
            {
                infowindow.close();
                map.setZoom(15);
                map.setCenter(marker1.getPosition());
                infowindow.setContent(info6);
                infowindow.open(map, marker6);
            });
       	//======================================================================================================================================
        var latlng7 = new google.maps.LatLng(5.4235, 100.3251);
        var marker7 = new google.maps.Marker({
        	position: latlng7,
        	animation: google.maps.Animation.DROP,
        	maxheight: 50,
        	maxwidth: 250,
        	map: map
        });

        var info7 = '<div id="h3">LunaBar</div>' + '<p>Operating hours</p>' + '<p1>Thursday - Tuesday</p1> 												 <p2 style="text-align: center">1:00PM - 7:00PM</p2> <br> <p1>Wednesday</p1> <p2 style="text-align: center">Closed</p2>' +
                    '<p>Address</p>' + '<p1>10d, Jalan Clove Hall, George Town, 10050 George Town, Penang</p1>' + '<p>Tel</p>' +
                    '<p1>016-452 9250</p1>'

        google.maps.event.addListener(marker7, 'click', function()
            {
                infowindow.close();
                map.setZoom(15);
                map.setCenter(marker1.getPosition());
                infowindow.setContent(info7);
                infowindow.open(map, marker7);
            });


        var myCity = new google.maps.Circle({
            center: georgetown,
            radius: 1500,
            strokeColor: "#ff0000",
            strokeOpacity: 0,
            strokeWeight: 1,
            fillColor: "#003366",
            fillOpacity: 0.3
        });

        myCity.setMap(map);
    }
    </script>
</head>
<body>
    <div id="map" style="height:600px;width:cover"></div>
</body>
</html>