Drawing the map.



<pre class="brush: js">

 function initialize() {
 
 var mapDiv = document.getElementById('map-canvas');
 
 philly = new google.maps.LatLng(39.95, -75.16)
 
 map = new google.maps.Map(mapDiv, {
 center: philly,
 zoom: 8, 
 mapTypeId: google.maps.MapTypeId.ROADMAP, 
 navigationControl: true, 
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 } 
 });
 
 google.maps.event.addListenerOnce
 (map, 'idle', addObjects);
 
 }
 

</pre>



The above draws our map of ROADMAP type into an HTML element (usually a div). We name our html element as 

map_canvas. Other valid map types are SATELLITE, HYBRID, and TERRAIN. 


Our map has small navigation control. DEFAULT, SMALL, ZOOM_PAN, ANDROID are valid navigation control types.


In the above function variables map and philly are global. As written above philly is a 

LatLang variable. It is the location of our marker and the center of our circle.



<pre class="brush: js">

 function addObjects() {
 
 var circle = {
 strokeColor: "#ff0000",
 strokeOpacity: 0.8,
 strokeWeight: 1,
 fillColor: "#ff0000",
 fillOpacity: 0.20,
 map: map,
 center: philly,
 radius: 16090*2
 }; 
 
 var drawCirle = 
 new google.maps.Circle(circle); 
 
 var icon = 
 'https://cdn.kahimyang.com/resources/funny/marker.png';
 
 var phillyMarker = new google.maps.Marker({
 position: philly,
 map: map,
 title: 'Click here to open info window'
 icon: icon
 }); 
 
 var phillyContent = 
 '&lt;span style="font-size:10px;"&gt;
 Philadelphia, PA&lt;/span&gt;';
 
 
 var phillyInfo = new google.maps.InfoWindow({
 content: phillyContent,
 maxWidth:180
 }); 
 
 google.maps.event.addListener
 (phillyMarker,'click', function() {
 phillyInfo.open(map, this);
 });
 
 google.maps.event.addListener
 (phillyInfo,'closeclick', function() {
 reCenterMap();
 });
 
 phillyInfo.open(map, phillyMarker);
 
 }
 

</pre>


 
The circle is centered at philly as already mentioned. The circle raduis is 16090*2 meters which is approximately 20 

miles. Marker icon is a URL to the actual icon. There are lots of icons online, here is <a 

href="http://code.google.com/p/google-maps-icons/" target="_blank" class="news_link" >one</a> of them. 



Add more markers and circles as needed.



We have a click event to open the info window and closeclick event to recenter our map when info window 

is closed. Our info window is initially opened. Depending on the size of the map, opening info window moves/displaces 

the map off center. 



In addition to recentering our map we also reset the zoom level to its original value. See below.



<pre class="brush: js">

 function reCenterMap() {
 map.setCenter(philly);
 map.setZoom (8);
 }
 

</pre>



The line below calls our initialization function and therefore draws the map. This is where the initial action happens. This should be outside any function so that it executes when loaded.



<pre class="brush: js">

 google.maps.event.addDomListener(
 window, 'load',initialize);
 

</pre>
 




The HTML page. Change the div size to fit your needs.



<pre class="brush: xml">

 &lt;html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"&gt;
 &lt;h:head&gt;
 
 &lt;title>Map&lt;/title&gt; 
 &lt;!--
 If your map does not work, get an API key from 
 code.google.com, replace GET-YOUR-API-KEY with your key,
 it is free and uncomment this block
 
 &lt;script src="http://www.google.com/jsapi?
 key=GET-YOUR-API-KEY" type="text/javascript"&gt;&lt;/script&gt; 
 --&gt;

 &lt;script type="text/javascript" 
 src="http://maps.google.com/maps/api/
 js?sensor=true"&gt;&lt;/script&gt; 
 
 &lt;script type="text/javascript" 
 src="./js/test.js" /&gt; 
 &lt;/h:head&gt;
 &lt;h:body&gt;
 &lt;div id="map-canvas" 
 style="width: 500px; height:350px"&gt;&lt;/div&gt;
 &lt;/h:body&gt;
 &lt;/html&gt;
 

</pre>




Here is how it looks like


<img loading="lazy" src="https://cdn.kahimyang.com/resources/map.png" alt="Google map tutorial" />



Good luck.

Google Map-Adding markers, info window, circle, small control, and events in Javascript