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

Below is a Google map code in Javascript, a collection of code I put together following guides and sample codes from Google Code website. If you like it, just copy and paste the code that follows in the same order that it is presented here into a file name of your choice. For the sake of this blog we save it as ./js/test.js. The following is based on Google Maps V3.

Drawing the map.


 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);
    
 }
   

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.


 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 = 
      'http://kahimyang.info/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 = 
         '<span style="font-size:10px;">
            Philadelphia, PA</span>';
   
   
    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);
        
 }
   

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 one 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.


 function reCenterMap() {
    map.setCenter(philly);
    map.setZoom (8);
 }
   

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.


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

The HTML page. Change the div size to fit your needs.


 <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
       
        <title>Map</title>    
        <!--
        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
     
        <script src="http://www.google.com/jsapi?
             key=GET-YOUR-API-KEY"  type="text/javascript"></script>  
        -->

       <script type="text/javascript" 
              src="http://maps.google.com/maps/api/
                js?sensor=true"></script> 
 
        <script type="text/javascript" 
              src="./js/test.js" />        
    </h:head>
    <h:body>
         <div id="map-canvas" 
           style="width: 500px; height:350px"></div>
    </h:body>
 </html>
     

Here is how it looks like

Google map tutorial

Good luck.

If you like the article, please share.
(Site URL pattern has changed as a result social actions counter was reset.)



Comment icon Comments (Newest first)