Topic
  • 18 replies
  • Latest Post - ‏2015-03-16T09:33:17Z by Marco1234
SystemAdmin
SystemAdmin
8614 Posts

Pinned topic Google map integration

‏2012-12-27T08:29:41Z |
I have been working on google map integration, and i have been stuck up in displaying the multiple latitude and longitude search results. I am able to get the values from the db but unable to pass it dynamically to the google map api in the javascript.

Please help on this. Thanks in advance.
Updated on 2013-04-05T14:11:23Z at 2013-04-05T14:11:23Z by SystemAdmin
  • VikramAnusuri
    VikramAnusuri
    14 Posts

    Re: Google map integration

    ‏2012-12-27T10:46:03Z  
    Hi,
    Can you share the logic that you are using to implement this? So that we can try to resolve the issue.
  • SystemAdmin
    SystemAdmin
    8614 Posts

    Re: Google map integration

    ‏2012-12-30T07:05:45Z  
    Hi,
    Can you share the logic that you are using to implement this? So that we can try to resolve the issue.
    Hi,

    I am newbee to WCS. This is what I have tried.Using the wcf:getdata, I have got the list of latitude and longitude for the the city, country, and the state. After that I have called the onload function and trying to call the pass these latitudes and longitudes as parameters. I pass this to the google map API for displaying the map.

    I have taken this approach. Please share if you have any ideas and let me know if Iam going on the correct path.
    Thanks.
  • VikramAnusuri
    VikramAnusuri
    14 Posts

    Re: Google map integration

    ‏2012-12-31T04:19:55Z  
    Hi,

    The following PDF has Map integration. Hope it will solve your issue.

    www.redbooks.ibm.com/redbooks/pdfs/sg247787.pdf

    Regards,
    Vikram.
  • SystemAdmin
    SystemAdmin
    8614 Posts

    Re: Google map integration

    ‏2013-01-08T11:02:40Z  
    Hi,

    The following PDF has Map integration. Hope it will solve your issue.

    www.redbooks.ibm.com/redbooks/pdfs/sg247787.pdf

    Regards,
    Vikram.
    Hi,
    I studied the document, it has google map integration with mobile and Madison starter store with MapQuest. I tried integrating google map by taking mapquest as a reference. I am struggling with it. I was unsuccessful. Can you please give me a suggestion as to how to integrate "Google Map" in Madison starter store.
    Please help me in this regard. Please give me your valuable inputs.
    Thanks.
  • VikramAnusuri
    VikramAnusuri
    14 Posts

    Re: Google map integration

    ‏2013-01-08T11:27:27Z  
    Hi,
    I studied the document, it has google map integration with mobile and Madison starter store with MapQuest. I tried integrating google map by taking mapquest as a reference. I am struggling with it. I was unsuccessful. Can you please give me a suggestion as to how to integrate "Google Map" in Madison starter store.
    Please help me in this regard. Please give me your valuable inputs.
    Thanks.
    Hi,
    I have integrated Google maps based on location not based on Latitude and Longitude. I can send you that code if you share your email id.
  • SystemAdmin
    SystemAdmin
    8614 Posts

    Re: Google map integration

    ‏2013-01-08T12:00:41Z  
    Hi,
    I have integrated Google maps based on location not based on Latitude and Longitude. I can send you that code if you share your email id.
    Hi,

    Many thanks to you. My email-id is khizar_mohammed@yahoo.com
    Please send your code to this email id.
  • SystemAdmin
    SystemAdmin
    8614 Posts

    Re: Google map integration

    ‏2013-04-05T14:11:23Z  
    Hi,

    Many thanks to you. My email-id is khizar_mohammed@yahoo.com
    Please send your code to this email id.
    Hi,

    Can someone send me the code snippet that VikramAnusuri sent? I'm trying to integrate Google Maps with WebSphere Commerce V7.

    Thanks...Bob
  • RavieshArora
    RavieshArora
    3 Posts

    Re: Google map integration

    ‏2013-06-20T11:40:59Z  
    Hi,

    Can someone send me the code snippet that VikramAnusuri sent? I'm trying to integrate Google Maps with WebSphere Commerce V7.

    Thanks...Bob

    Hi,

     

    Please send me the details and steps of Integrating Google Map with IBM Websphere Aurora Store asap

    My id is : raviesh.a@hcl.com

    Thanks,

    Raviesh

  • RavieshArora
    RavieshArora
    3 Posts

    Re: Google map integration

    ‏2013-06-20T11:42:14Z  
    Hi,
    I have integrated Google maps based on location not based on Latitude and Longitude. I can send you that code if you share your email id.

    HI Vikram,

    Please let me know the steps and send me the code to integrate Google Map with IBM Websphere.

    Thanks,

    Raviesh

    raviesh.a@hcl.com

  • VikramAnusuri
    VikramAnusuri
    14 Posts

    Re: Google map integration

    ‏2013-06-20T11:51:58Z  

    HI Vikram,

    Please let me know the steps and send me the code to integrate Google Map with IBM Websphere.

    Thanks,

    Raviesh

    raviesh.a@hcl.com

    Hi,

    The following PDF has Map integration.

    www.redbooks.ibm.com/redbooks/pdfs/sg247787.pdf

    Regards,
    Vikram.

  • RavieshArora
    RavieshArora
    3 Posts

    Re: Google map integration

    ‏2013-06-20T12:33:29Z  
    Hi,

    Can someone send me the code snippet that VikramAnusuri sent? I'm trying to integrate Google Maps with WebSphere Commerce V7.

    Thanks...Bob

    Hi Vikram,

     

    I have referred to pdf that you mentioned. Please send me the source files.

    Thanks,

    Raviesh

    raviesh.a@hcl.com

  • garg3085
    garg3085
    1 Post

    Re: Google map integration

    ‏2014-02-07T21:49:22Z  
    Hi,
    I have integrated Google maps based on location not based on Latitude and Longitude. I can send you that code if you share your email id.

    Hi Vikram,

     

    Could you please the code for googlemaps integration @ gargrishu@gmail.com.

     

    Thanks

  • Mahesh Kurup
    Mahesh Kurup
    1 Post

    Re: Google map integration

    ‏2014-05-19T09:15:28Z  

    Hi Vikram,

    Can you please share the integration to mahi86@gmail.com .

    Thanks

  • RanjeetaMishra
    RanjeetaMishra
    1 Post

    Re: Google map integration

    ‏2014-08-08T12:40:04Z  

    Hi,

    Can anyone  please share the code for googlemaps integration with Madisons @ ranjeeta.m@tcs.com.

  • SwetaSinha
    SwetaSinha
    3 Posts

    Re: Google map integration

    ‏2014-08-25T07:35:33Z  

    HI Vikram,

    Please let me know the steps and send me the code to integrate Google Map with IBM Websphere.

    Thanks,

    Raviesh

    raviesh.a@hcl.com

    Hi,

    Please send me the details and steps of Integrating Google Map with IBM Websphere Aurora Store asap

    My id is : sweta2003@gmail.com

    Thanks,

    Sweta

     

  • saurav2341
    saurav2341
    1 Post

    Re: Google map integration

    ‏2014-12-29T12:30:30Z  

    Hi All,

     

    Please send me the details and steps of Integrating Google Map with IBM Websphere Aurora Store asap. 

    My email id: Saryasap@gmail.com

     

     

    Saurav

     

  • Rajat Mathu
    Rajat Mathu
    1 Post

    Re: Google map integration

    ‏2014-12-30T07:08:29Z  

    Hi All,

     

    Please send me the details and steps of Integrating Google Map with IBM Websphere Aurora Store asap. 

    My email id: Saryasap@gmail.com

     

     

    Saurav

     

    Hi,

    Shall be really thankful if you can send me any docs you have for Google maps integration on Madisons/Aurora store 

    Email id: therajatmathur@outlook.com

    I have tried embedding google maps on Madisons but with no success.

    Thanks in advance.

  • Marco1234
    Marco1234
    4 Posts

    Re: Google map integration

    ‏2015-03-16T09:33:17Z  

    Because everything on the web is made up of HTML, we'll start there. The following code creates the simplest of web pages:

    
    
    <!DOCTYPE html>
    
    <html>
      
    <head></head>
      
    <body>
      
    </body>
    
    </html>
    
    

    None of this is specific to Google Maps - it's the basis for any HTML page. Open your text editor and add this code, then save the file to your desktop as google-maps.html (or any other filename that ends with .html).

    Your Google Map requires a page element in which to appear; add a div tag to the body with an id attribute of map-canvas. This creates a container that we'll reference later in the lesson.

    
    
    <!DOCTYPE html>
    
    <html>
      
    <head></head>
      
    <body>
     
       
    <div 
    id
    =
    "map-canvas"
    ></div>
      
    </body>
    
    </html>
    
    

    Set the width and height of the div element using CSS. By default, a div has a height of 0, meaning that any map you place inside it won't be visible. Use a style tag in the head to set the map to any size; in this case 500 pixels wide and 400 pixels high.

    
    
    <!DOCTYPE html>
    
    <html>
      
    <head>
     
       
    <style>
     
         
    #
    map-canvas 
    {
     
           
    width
    : 
    500px
    ;
     
           
    height
    : 
    400px
    ;
     
         
    }
     
       
    </style>
      
    </head>
      
    <body>
     
       
    <div 
    id
    =
    "map-canvas"
    ></div>
      
    </body>
    
    </html>
    
    

    Load the HTML file in a web browser by dragging it from your desktop into the address bar of your browser. You'll notice that nothing is displayed - there's nothing in the div yet. If you'd like to see the div on your page, add a background-color CSS declaration to your existing <style> tag:

    
    
    <style>
      
    #
    map-canvas 
    {
     
       
    width
    : 
    500px
    ;
     
       
    height
    : 
    400px
    ;
     
       
    background-color
    : 
    #CCC
    ;
      
    }
    
    </style>
    
    

    Reloading the page will display a grey box; that's your div.

    To bring forth a map, you must add two pieces of JavaScript to your page. The first loads the Google Maps JavaScript API; the second creates and configures the map.

    Loading the API

    Load the Google Maps API by adding a <script> tag to the <head> section of your HTML. This script downloads the code required to display maps on your page.

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

    Create and configure the map

    The final piece of code is the JavaScript that creates the map. The code contains a function to run once the page has loaded. In this example, and all of the examples in the Maps API documentation, this function is named initialize.

    
    
    <script>
      
    function 
    initialize
    () 
    {}
    
    </script>
    
    

    Add this code immediately after the <script> tag you created in the last step.

    The google.maps.Map object

    The first thing the initialize function needs to do is create a new Google Maps object:

    
    
    var 
    map 
    = 
    new 
    google
    .
    maps
    .
    Map
    ();
    
    

    The Map object constructor takes two arguments:

    • A reference to the div that the map will be loaded into. We use the JavaScript getElementById function to obtain this.

      
      
      <script>
        
      function 
      initialize
      () 
      {
       
         
      var 
      mapCanvas 
      = 
      document
      .
      getElementById
      (
      'map-canvas'
      );
       
         
      var 
      map 
      = 
      new 
      google
      .
      maps
      .
      Map
      (
      mapCanvas
      );
        
      }
      
      </script>
      
      
    • Options for the map, such as the center, zoom level, and the map type. There are many more options that can be set, but these three are required.

      
      
      <script>
        
      function 
      initialize
      () 
      {
       
         
      var 
      mapCanvas 
      = 
      document
      .
      getElementById
      (
      'map-canvas'
      );
       
         
      var 
      mapOptions 
      = 
      {
       
           center
      : 
      new 
      google
      .
      maps
      .
      LatLng
      (
      44.5403
      , 
      -
      78.5463
      ),
       
           zoom
      : 
      8
      ,
       
           mapTypeId
      : 
      google
      .
      maps
      .
      MapTypeId
      .
      ROADMAP
          
      }
       
         
      var 
      map 
      = 
      new 
      google
      .
      maps
      .
      Map
      (
      mapCanvas
      , 
      mapOptions
      );
        
      }
      
      </script>
      
      
      • center is a Google Maps LatLng object that tells the the API where to center the map.
      • zoom is a number between 0 (farthest) and 22 that sets the zoom level of the map.
      • mapTypeId is used to specify what type of map to use. Your choices are ROADMAPSATELLITEHYBRID, or TERRAIN.

    Executing the JavaScript function

    Add an event listener to the window object that will call the initialize function once the page has loaded. Calling initialize before the page has finished loading will cause problems, since the div it's looking for may not have been created yet; this function waits until the HTML elements on the page have been created before calling initialize.

    
    
       
    <script>
     
         
    function 
    initialize
    () 
    {
     
           
    ...
     
         
    }
     
         google
    .
    maps
    .
    event
    .
    addDomListener
    (
    window
    , 
    'load'
    , 
    initialize
    );
     
       
    </script>
    
    

    The finished code

    This is the final code you've put together in this lesson. It:

    • Creates a div, and gives it a size.
    • Loads the Google Maps JavaScript API v3.
    • Creates and displays a Google Map in the div.
    
    
    <!DOCTYPE html>
    
    <html>
      
    <head>
     
       
    <style>
     
         
    #
    map-canvas 
    {
     
           
    width
    : 
    500px
    ;
     
           
    height
    : 
    400px
    ;
     
         
    }
     
       
    </style>
     
       
    <script 
    src
    =
    "https://maps.googleapis.com/maps/api/js"
    ></script>
     
       
    <script>
     
         
    function 
    initialize
    () 
    {
     
           
    var 
    mapCanvas 
    = 
    document
    .
    getElementById
    (
    'map-canvas'
    );
     
           
    var 
    mapOptions 
    = 
    {
     
             center
    : 
    new 
    google
    .
    maps
    .
    LatLng
    (
    44.5403
    , 
    -
    78.5463
    ),
     
             zoom
    : 
    8
    ,
     
             mapTypeId
    : 
    google
    .
    maps
    .
    MapTypeId
    .
    ROADMAP
            
    }
     
           
    var 
    map 
    = 
    new 
    google
    .
    maps
    .
    Map
    (
    mapCanvas
    , 
    mapOptions
    )
     
         
    }
     
         google
    .
    maps
    .
    event
    .
    addDomListener
    (
    window
    , 
    'load'
    , 
    initialize
    );
     
       
    </script>
      
    </head>
      
    <body>
     
       
    <div 
    id
    =
    "map-canvas"
    ></div>
      
    </body>
    
    </html>
    
    

    We recommend reading the Customizing Google Maps class next. For inspiration, check out some of the applications at morethanamap.com.