Skip to content Skip to sidebar Skip to footer
Home / Arcgis / Dojo / Gis / Javascript / Maps

Creating Google Maps' Interface In Dojo

Post a Comment
I am trying to use the ArcGIS 2.1 JS API to create a custom interface that looks similar to Google Maps. What is confusing me (particularly with Dojo's layout scheme) is how Google

Solution 1:

Not sure what problem you're running into - either troubleshooting or design, but, here is a rigid construct example that might work:

<html><head><title>dojo/google map example</title><linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.css"type="text/css"media="all" /><linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.css"type="text/css"media="all" /><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script><scriptdjConfig="parseOnLoad:true"type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script><scripttype="text/javascript">
dojo.require( "dijit.layout.BorderContainer" );
dojo.require( "dijit.layout.ContentPane" );
dojo.addOnLoad( function() {
    var myLatlng = new google.maps.LatLng(38.887, -77.016);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"Hello World!"
    });   
});
</script></head><bodyclass="claro"style="height:100%;padding:0;margin:0; overflow:hidden"><divdojoType="dijit.layout.BorderContainer"style="height:100%"><divdojoType="dijit.layout.ContentPane"region="left"splitter="true"style="width:200px">
        Left search thing
    </div><divdojoType="dijit.layout.ContentPane"region="top"style="height:100px">
        Top
    </div><divdojoType="dijit.layout.ContentPane"region="center"style="overflow:hidden"><divid="map_canvas"style="height:100%; width:100%"></div></div></div></body></html>

You can substitute components for expando panes, and other gizmos, but this should technically work and look like:

http://imgur.com/ASlGG.png

Solution 2:

Or you could just use the ArcGIS Extension for Google Maps :)

http://resources.esri.com/arcgisserver/apis/javascript/gmaps/

Post a Comment for "Creating Google Maps' Interface In Dojo"