Vue

by helloworld

HTML

<div id="app">
  <section class="content">
        <div id="map"  style="width: 1200px; height: 600px">
                                    
         </div>
    </section>
</div>

Vue

new Vue({
  el: "#app",
  data: {
    clinic: {
     '-MARYIyvPMWrt6iAT-z5': {
address:"Bankerohan, Davao City",
image:"BodyLocationResponse.png",
imageUrl:"https://firebasestorage.googleapis.com/v0/b/appointmedweb.appspot.com/o/clinicImages%2FBodyLocationResponse.png?alt=media&token=6676ac14-1395-47cc-ae35-3c4930bd63bf",
lat:7.068450091598368,
lng:125.60281273961598,
name:"Bankerohan Clinic",
     },
	'-MARYqvcnOnUwHIYbrW': {
address:"Matina, Davao City",
image:"BodySymptopmsAPI_Call.png",
imageUrl:"https://firebasestorage.googleapis.com/v0/b/appointmedweb.appspot.com/o/clinicImages%2FBodySymptopmsAPI_Call.png?alt=media&token=7fb85851-9be8-4d9a-93c3-d013f867d15a",
lat:7.06337883770241,
lng:125.5989448599008,
name:"UM matina Clinic",
	}
},
 address:{
    lat:7.0650673,
    lng:125.6561476
    },
     markersInfo:[],
  },
 created(){
 	console.log(this.clinic)
  this.loadScript()
 },
 methods:{
 	initMap(){
            var center = new google.maps.LatLng(this.address.lat, this.address.lng)
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: center
            })
           
            // BEFORE:
            /* for (var i = 0; i < this.clinic.length; i++) {
                var clinicLat = this.clinic.data[i].lat;
                var clinicLng = this.clinic.data[i].lng;
                var details = this.clinic.data[i].name; */
            for (const item of Object.values(this.clinic)) {
            		var clinicLat = item.lat;
                var clinicLng = item.lng;
                var details = item.name;
                var latLng = new google.maps.LatLng(clinicLat,clinicLng);
        
                var markers = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    icon: {
                        url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
                    },
                    size: new...