Bootstrap Snippet custom gmap using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var markers = [];
var map;
var labels = 'ABCD';
var labelIndex = 0;
function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(40.7127837, -74.0059413),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // New York, NY, USA (40.7127837, -74.0059413)
  // Newark, NJ, USA (40.735657, -74.1723667)
  // Jersey City, NJ, USA (40.72815749999999, -74.07764170000002)
  // Bayonne, NJ, USA (40.6687141, -74.11430910000001)
  addMarker({
    lat: 40.7127837,
    lng: -74.0059413
  }, "red");
  addMarker({
    lat: 40.735657,
    lng: -74.1723667
  }, "green");
  addMarker({lat:40.7281575, lng:-74.0776417}, "yellow");
  addMarker({lat:40.6687141, lng:-74.1143091}, "orange");
}
google.maps.event.addDomListener(window, "load", initialize);
function addMarker(location, color) {
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    icon: {url:'http://maps.google.com/mapfiles/ms/icons/'+color+'.png',
    labelOrigin: new google.maps.Point(15,10)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"custom gmap "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"custom gmap " Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"custom gmap "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY