JSFiddle - React, Tailwind, and code Playground

by Yamini Sontakke

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<button>Show my position</button>
<div id="googlemap"></div>

CSS

#googlemap {
    height: 400px;
    width: 400px;
    background-color:'#333';
}

JavaScript

var locations = ["SBY Jewellery, 12.5, 27.4666996002197,Bahra,Sudan","SSY Jewellery, 30.8, 27.526402,Cairo,Egypt"];
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById('googlemap'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

 var marker, i;

		  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

      marker = new google.maps.InfoWindow({
        map: map,
        position: pos,
		zoom:5,
        content: 'You are here !',
		
      });
	  bounds.extend(marker.position);
	  	//map.setZoom(12);
        //map.setCenter(marker2.getPosition());

      //map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
for (i = 0; i < locations.length; i++) {

 loc_array = locations[i].split(",");
 
       var marker = new MarkerWithLabel({
       position: new google.maps.LatLng(loc_array[1], loc_array[2]),
       draggable: true,
	   title:loc_array[0],
       raiseOnDrag: true,
       map: map,
       labelContent: loc_array[0],
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels" // the CSS class for the label
     });
	var content = loc_array[0] + " - <a class='ac' onclick='move("+ loc_array[4] +");' href='#'>" +  + "</a><span class='p'>" +  + ": " + loc_array[6] + " </span><span class='p'>" +  + ": " + loc_array[5] + ", " + loc_array[7] + ", " + loc_array[8] + "</span>";
	infowindow = new google.maps.InfoWindow();
	//extend the bounds to include each marker's position
  bounds.extend(marker.position); 
  google.maps.event.addListener(marker, 'click', (function(marker, i,content,infowindow) {	
 return function() {
      infowindow.setContent(content);
      infowindow.open(map, marker);
    }
  })(marker, i,content,infowindow));
  	    
  	  ...