Google地图嵌入：将iFrame转变为iOS/Android中的链接

Question

在我的网站上，我有一张嵌入式Google地图，显示我的业务位置。当有人浏览我的网站上的iOS/Android设备上我希望他们能够点击地图，并在本机谷歌地图应用，打开使用URL模式

comgooglemaps://

我的计划是把iFrame到这些设备上的链接，但我没有运气。

任何人都有任何想法如何做到这一点或有一个更好的想法如何实现这一功能。

Answer 1

我决定试试我的方法，当浏览器低于certian大小时，我使用jQuery来隐藏iFrame并将其替换为静态图像。那时我很简单。

Answer 2

我有JSON

“GoogleMap的”： “\ u003ciframe SRC = \” https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d434549.40374533384!2d74.24349628287739!3d31.690830957117996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sPakistan+Lahore!5e0!3m2!1sen!2s!4v1395138949280 \”宽度= \ “600 \” 高度= \ “450 \” FRAMEBORDER = \ “0 \” 风格= \ “边界：0 \” \ u003e \ u003c/iframe中\ u003e “

当解析它来字符串，....结果

字符串IFRAME =” https://www.google。 COM /地图/嵌入？PB =！1m16！1m12！1立方米！1d434549.40374533384！2d74.24349628287739！3d31.690830957117996！2立方米！1F0！2f0的！3f0！3平方米！1i1024！2i768！4f13.1！2M1！1sPakistan +拉合尔！ 5e0！3m2！1sen！2s！4v1395138949280 width = 600 height = 450 frameborder = 0 style = border：0“;

布局：activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/LinearLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    tools:context=".MainActivity" > 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="40dp" 
     android:background="#00FF00" > 

     <TextView 
      android:id="@+id/header_textView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:text="Google Map" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textStyle="bold" /> 
    </RelativeLayout> 

    <WebView 
     android:id="@+id/googlemap_webView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_margin="10dp" /> 

</LinearLayout> 

的Java类：MainActivity

public class MainActivity extends Activity { 

    private WebView googleMapWebView; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     initializeUI(); 
    } 

    /** 
    * This method is used to Initialize UI components 
    */ 
    private void initializeUI() { 

      String iframe = "<iframe src=https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d434549.40374533384!2d74.24349628287739!3d31.690830957117996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sPakistan+Lahore!5e0!3m2!1sen!2s!4v1395138949280 width=600 height=450 frameborder=0 style=border:0</iframe>"; 
      googleMapWebView = (WebView) findViewById(R.id.googlemap_webView); 
      googleMapWebView.getSettings().setJavaScriptEnabled(true); 
      googleMapWebView.loadData(iframe, "text/html", "utf-8"); 
    } 

} 

AndroidManifest.xml中

1. <uses-permission android:name="android.permission.INTERNET"/>

而且赤WIFI许可等。

Answer 3

WebView webview = (WebView) contact.findViewById(R.id.webView); 
    webview.getSettings().setJavaScriptEnabled(true); 
    webview.loadData("<iframe src=\"https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d59155.3066742403!2d82.165487!3d22.079923!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x41830cd45c4743bd!2sJD+Civil+Services+Academy!5e0!3m2!1sen!2sin!4v1497879962473\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>", "text/html", "utf-8"); 
    WebSettings webViewSettings = webview.getSettings(); 
    webViewSettings.setJavaScriptCanOpenWindowsAutomatically(true); 
    webViewSettings.setJavaScriptEnabled(true); 
    webViewSettings.setBuiltInZoomControls(true); 
    webViewSettings.setPluginState(WebSettings.PluginState.ON);