google map api Font Display

Discussion in 'Programming/Scripts' started by dinesh.4126, Jul 8, 2009.

  1. dinesh.4126

    dinesh.4126 New Member

    Hi,
    In my project we have designed a web page of remote weather system which will display the weather information of a particular location which will be store in mysql data base server in multilinguial language based upon the location.So .problem I am getting is that on google map we are using overlay text on map of weather, fish and wind direction .and when we click on supposed wind icon over google map it shows the wind direction informations which comes from mysql data server.and below google map their is table which will show all weather, fish and wind direction information.And I am stucking at point google map overlay taext on map when click on that icon it's showing unicode of language instead of showing Hindi Language fonts but below are the table which show Hindi fonts.And when we select english language for dispaly it shows in english fonts on overlay icon and table also.Thing become more clear with attacment I am sending and dispalying in Hindi Language and near icon of weather information unicode comes but below its showing hindi language.Can somebody suggest How can I debug this problem so that it show hindi fonts on overlay icon.
     

    Attached Files:

    Last edited: Jul 8, 2009
  2. dinesh.4126

    dinesh.4126 New Member

    Kindly Suggest something upon this.
    Waiting For Early Response....
     
  3. dinesh.4126

    dinesh.4126 New Member

    Just elaborate more using this function map.addOverlay(createMarkerforimage(latlng, file ,info));
    var latlng = new GLatLng(southWest.lat() + latSpan * 0.58,southWest.lng() + lngSpan * 0.6);
    info = {wind_information} ;
    file = {wind_direction_from}{wind_direction_to}.png;
    $weather_information="Weather:".$weather_i.' Temp :'.$temp.' Humidity:'.$humidity.' Warning:'.$warning;
    and now problem is in passing warning value which is in text i.e. rainy,stormy,windy etc.through mysql data base server.But when English language is selected for display of text on overlay its showing English fonts.But other then English its not showing,When I am entering unicode of other language Hindi which is storing in database server mysql instead of showing Hindi fonts its displaying unicode of corresponding language.Has anybody any Idea why its showing unicode of language other then English.
    Below is code for Map Display+Weather Information.
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <body>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPYT78Azii9ZqwLmlU2VQJhRU9Gu0987DUr62vY-zxjVyLCj4-BQG5ZPkezsKN1U1e5L247vqxgFEDg"
          type="text/javascript"></script>
    
    <script type="text/javascript">
     function display_info(info)
            {
             var theNode = document.getElementById("infobold"); 
                    var tNode = theNode.childNodes[0]; 
             tNode.nodeValue = info;
            };
            function initialize() 
            {
            alert('prabhat');
      if (GBrowserIsCompatible()) 
             {
              var map = new GMap2(document.getElementById("map_canvas"));
                    map.setCenter(new GLatLng({latitude}, {langitude}), {zoom});
                    map.addControl(new GSmallMapControl());
       {satellite_str}
                            {satellite_zoom}
                    var bounds = map.getBounds();
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();
      var lngSpan = northEast.lng() - southWest.lng();
      var latSpan = northEast.lat() - southWest.lat();
                    
                    function createMarker(point,file ,info) 
                    {
       // Create a lettered icon for this point using our icon class
                      var baseIcon = new GIcon();
                            baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
                            baseIcon.iconSize = new GSize(34, 34);
                            baseIcon.shadowSize = new GSize(37, 34);
                            baseIcon.iconAnchor = new GPoint(9, 34);
                            baseIcon.infoWindowAnchor = new GPoint(9, 2);
                            baseIcon.infoShadowAnchor = new GPoint(18, 25);
       var letteredIcon = new GIcon(baseIcon);
       letteredIcon.image = file;
       markerOptions = { icon:letteredIcon };
       var marker = new GMarker(point, markerOptions);
                     {display_str}
        return marker;
       }
       function createMarkerforimage(point,file ,info) 
                            {
         // overlays text on maps using image from image.php
                       var baseIcon = new GIcon();
                              //baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
                                        baseIcon.iconSize = new GSize(70, 34);
                              //baseIcon.shadowSize = new GSize(37, 34);
                              baseIcon.iconAnchor = new GPoint(9, 34);
                              baseIcon.infoWindowAnchor = new GPoint(9, 2);
                            baseIcon.infoShadowAnchor = new GPoint(18, 25);
         var letteredIcon = new GIcon(baseIcon);
         letteredIcon.image = file;
         markerOptions = { icon:letteredIcon };
         var marker = new GMarker(point, markerOptions);
                      {display_str}
        return marker;
      }
                    
                       var latlng = new GLatLng(northEast.lat() - latSpan * 0.2,northEast.lng() - lngSpan * 0.1);
                              info = {weather_information}; 
                              file = {weather}.png ;
                              map.addOverlay(createMarker(latlng, file ,info));
            
    
                    var latlng = new GLatLng(northEast.lat() - latSpan * 0.4,northEast.lng() - lngSpan * 0.1);
                            info = {fish_info};
                            file = {fish}.png;
                            map.addOverlay(createMarker(latlng,file,info));
    var latlng = new GLatLng(southWest.lat() + latSpan * 0.5,southWest.lng() + lngSpan * 0.6);
                              info = {wind_information} ; 
                              file = {wind_direction_from}{wind_direction_to}.png;
                              map.addOverlay(createMarker(latlng, file ,info));
                       var latlng = new GLatLng(southWest.lat() + latSpan * 0.58,southWest.lng() + lngSpan * 0.6);
                              info = {wind_information} ; 
                              file = {wind_direction_from}{wind_direction_to}.png;
                              map.addOverlay(createMarker(latlng, file ,info));
                              latlng = new GLatLng(southWest.lat() + latSpan * 0.55,southWest.lng() + lngSpan * 0.45);
                              file = "image.php?wind_speed={windinfo_speed}";
                              map.addOverlay(createMarkerforimage(latlng, file ,info));
            }
    }
    
    </script>
    </head>
    {info}
    {file}
    {width}
    {height}
    <body onload="initialize()" onunload="GUnload()">
     <table  width="60%"border="0" cellpadding="0" cellspacing="0" align="center">
      <tr>
    <td colspan="2"><div id="map_canvas" style="width: {width}px; height: {height}px" align="center"></div>
            <div align="center"><h2>Weather information</h2></div> </td>
                    </tr>
                    <tr>
     <td>
     <table  width="50%" border="0" cellpadding="0" cellspacing="5" align="center">
                                            {form}
                                         
     
  4. halloween

    halloween New Member

    Waiting For Early Response....
     

Share This Page