[Google Maps API v3] V3 map not displaying

mkmsdev Sun, 18 Oct 2015 14:17:40 -0700

Hi,
We are converting a version2 to Version 3 google map inside a Delphi form 
using the TWebBrowser component.  Version 2 worked fine, but having 
problems getting the conversion to show in V3.  To debug, I've set a 
breakpoint after the page html has been generated, stuffed it into a .html 
file and browsed the file (using chrome & IE).  Chrome's developer tools 
shows no javascript or syntax errors, but I am not getting a rendered map.


Thanks for any help!
Dennis

The generated page can be viewed here:  
https://www.dropbox.com/s/7dk8nqx3nf16u0e/TestLatestHtml.html?dl=0

Some notable points:
   In GetMarker, I do not see the substitution for csid in the generated 
code so wonder if javascript is treating map, icon1 and icon2 as text 
instead of variables.

Here is the generated source:

<!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">
<head>
  <title>Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0"/>
  <meta charset=utf-8"/>
  <style type="text/css">
      html, body {width: 100%; height: 100%;}
      body {margin-top: 0px; margin-right: 0px; margin-left: 0px; 
margin-bottom: 0px;}
  </Style>  
  <script type="text/javascript">
      function GetMarker(csid, myLat, MyLong, premise) {
      if (premise) {
       var marker = new google.maps.Marker({position: {lat:28.3280638, 
lng:-81.4025985}, label: csid, map: map, icon: icon1});
     }
     else {
       var marker = new google.maps.Marker({position: {lat: 28.3280638, 
lng: -81.4025985}, label: csid, map: map, icon: icon2});
     }
   }
    function NewMarker(Info, MyLat,MyLong, premise) {
      var mk2 = GetMarker(Info, MyLat, MyLong, premise);
    };
  </script>   
</head> 
  
<body>     
<div id="map" style="width: 600px; height: 400px"></div>    
<script>
   function initialize() {
     var map;   var icon1,icon2;
     map = new google.maps.Map(document.getElementById("map"), {center: 
{lat:28.3280638, lng:-81.4025985}, zoom: 15});
     icon1 = new GIcon(G_DEFAULT_ICON, "
http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-blue-pin.png
");
     icon2 = new GIcon(G_DEFAULT_ICON, "
http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-red-pin.png
");
     var mk = NewMarker("<b>Charles~Cassandra</b><br/>Testor<br/> 
(407)870-0040",28.3280638 ,-81.4025985, true);
   };    
</script>    
<script type="text/javascript"
   src="
https://maps.googleapis.com/maps/api/js?key=AIzaSyC39BI6ULNfGzXW_ABqLwuvPx-Sm9mYGcY"&callback=initialize
>
</script>  
</body> 
</html>


here is the Delphi code generation:

function TGoogleMap.GetMapHTML(MarketHeader:String; MyLat, MyLong : 
String): String;
  function GetSubAddress:String;
  var
   loop : Integer;
  begin
    Result := '';
    for loop := low(FMarkers) to High(Fmarkers) do begin
      if (Fmarkers[loop].Lat <> '' ) then
        Result :=  Result + '        AddMarker("'+ Fmarkers[loop].Info + 
'",' + Fmarkers[loop].Lat + ' ,' + Fmarkers[loop].Lon +',false); ' + #13#10 
;
//        Result :=  Result + '        map.addOverlay(GetMarker("'+ 
Fmarkers[loop].Info + '",' + Fmarkers[loop].Lat + ' ,' + Fmarkers[loop].Lon 
+',false)); ' + #13#10 ;
      end;
  end;
begin
  Result :=
    '<!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"> ' +
    '  <head> ' +
    '    <title>Google Maps</title> ' +
    '    <meta name="viewport" content="initial-scale=1.0"/> ' +
    '    <meta charset=utf-8"/> ' +
    '  <style type="text/css">' +
//    '    v\:* {behavior:url(#default#VML);}' +
    '    html, body {width: 100%; height: 100%;}' +
    '    body {margin-top: 0px; margin-right: 0px; margin-left: 0px; 
margin-bottom: 0px;}' +
    '  </Style>' +
    '  <script type="text/javascript"> ' +
    '   function GetMarker(csid, myLat, MyLong, premise) { ' +
//    '   var point = new GLatLng(MyLat,MyLong); ' +
    '     if (premise) {' +
    '       var marker = new google.maps.Marker({' +
    '          position: {lat:' +myLat+ ', lng:' +MyLong+ '},' +
    '          label: csid,' +
    '          map: map,' +
    '          icon: icon1' +
    '       });' +
    '     }' +
    '     else {' +
    '       var marker = new google.maps.Marker({' +
    '         position: {lat: ' +myLat+', lng: ' +MyLong+ '},' +
    '         label: csid,' +
    '         map: map,' +
    '         icon: icon2' +
    '       });' +
    '     }' +
//    '     google.maps.event.addListener(map, "click", function(event) { ' 
+
//    '        marker.openInfoWindowHtml(csid); ' +
//    '
//    '          }); ' +
//    '     return marker; ' +
    '   } ' +
    '   function NewMarker(Info, MyLat,MyLong, premise) {' +
    '      var mk2 = GetMarker(Info, MyLat, MyLong, premise); ' +
//    '      map.addOverlay(mk2);'+
    '   };' +
    '  </script> ' +
    '  </head> ' +
//    '  <body onload="initialize()" onunload="GUnload()"> ' +
    '  <body> ' +
    '    <div id="map" style="width: 600px; height: 300px"></div> ' +
    '   <script>' +
    '   function initialize() { ' +
    '   var map;' +
    '   var icon1,icon2; ' +
    '     map = new google.maps.Map(document.getElementById("map"), 
{center: {lat:' +  MyLat +', lng:' + MyLong + '}, zoom: 15}); ' +
    '     icon1 = new GIcon(G_DEFAULT_ICON, "
http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-blue-pin.png";);'
 
+
    '     icon2 = new GIcon(G_DEFAULT_ICON, "
http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-red-pin.png";);'
 
;
          Result := Result + GetSubAddress;   // retrieve the additional 
markers to display.
          Result := Result +
    '     var mk = NewMarker("' + MarketHeader + '",' + MyLat + ' ,' 
+MyLong +', true);' +
//    '     map.addOverlay(mk); ' +
//    '     map.setCenter(new GLatLng(' + Lat + ' ,' +Long +'), ' + 
IntToStr(FZoomLevel) + '); ' +
//    '     map.addControl(new GScaleControl()); ' +
//    '     map.addControl(new GOverviewMapControl()); ' +
    '   }; ' +
    '   </script>' +
    '    <script type="text/javascript" src="
https://maps.googleapis.com/maps/api/js?key=AIzaSyC39BI6ULNfGzXW_ABqLwuvPx-Sm9mYGcY";
 
&callback=initialize></script>' +
    '  </body> ' +
    '</html> ';
    mmWeb.Lines.Add('************************');
    mmWeb.Lines.Add(Result);
end;

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at http://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.

[Google Maps API v3] V3 map not displaying

Reply via email to