How to build a Google map with maker and infowindow

Steps:

1. Create your javascript Google map function
2. Integrate your code in a HTML page

Technologies:

1. Javascript
2. Google map  API
3. HTML

Document:

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #my_map {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>

// create your javascript function
function init (){

// Create a variable holding your GPS coordinates (+ for North or Eat, - for South or West)
   var myLatlng = new google.maps.LatLng(+44.5403, -78.5463);

// Set map options for zoom and position
   var mapOptions =  zoom: 15, center: myLatlng};

//Create an id for your map
   var map = new google.maps.Map(document.getElementById('my_map'), mapOptions);

// Create a text that will be displayed on a infowindow
   var contentString =
              '<div id="content">'+                     
              '<em id="firstHeading" class="firstHeading" style="color:#FF4000" >Synaps21 |</em>'+       
              '<b style="color:#FF00BF">|| This is my map ! '  + '</b>'
                 +                              
              '</div>';

// Create a infowindow
  var infowindow = new google.maps.InfoWindow({
              content: contentString
          });

// Create  a marker
 var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Synaps21',
              icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'

// You can change the marker color
              //icon: 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'
             // icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
          });

// Make the marker open a infowindow on click
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
          });
    }

 google.maps.event.addDomListener(window, 'load', init);

</script>
  </head>
  <body>
    <div id="my_map"></div>
  </body>
</html>

   

Keyword:

Google map