How do i put arcgis as a layer on Google map

4669
1
06-19-2017 04:45 PM
KhaldoonMansour
New Contributor
Hello,
i have a vehicle tracking software thats based on Google Maps, a customer of mine wants to add archgis map of his own (thats protected by a token), he want to overlay this map to the software original map , so he could see his vehicles on his own map that already has some addresses.
i tried arcgislink solution but it doesnt work ! i have surfed arcgid documentation and google documentation, nothing fits in my case
please help me with a simple code on how to do that as its my first time working with ArcGIS maps, i tried this code and i could see the arcgis map correctly, i dont know how to add that to google

<!DOCTYPE html>
       <html>
       <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title><?php echo siteTitle;?></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"/>
        <style>
       html, body, #map{
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <script src="https://js.arcgis.com/3.20/"></script>
        <script type="text/javascript">
            dojo.require("esri.map");
            dojo.require("dojo.date.locale");
   
            var map;
            var token ="<?php echo $vars['esriToken'];?>";
            function init() {
                map = new esri.Map("map");
                var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://mapserv.ThisisTheServerURL/MapServer?token=" + token);
                map.addLayer(layer);
                var resizeTimer;
                dojo.connect(map, 'onLoad', function(theMap) {
                    dojo.connect(dijit.byId('map'), 'resize', function() {
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function() {
                            map.resize();
                            map.reposition();
                        }, 500);
   
            });
                });
            }
   
            dojo.addOnLoad(init);
        </script>
    </head>
    <body>
    <div id="map" dojotype="dijit.layout.ContentPane" region="center"> </div>
    </div>
    </body>
    </html>
How do i reflect that on Google map ?
Your help is so much appreciated
0 Kudos
1 Reply