google map en la web

[airegrafico]

hola,
Quisiera poner en mi web la aplicación google map, en la sección contactar.Y lo quisiera para poder guiar a los usuarios para que puedan llegar a las oficinas de la empresa. Simplemente poniendo los campos lugar de origen y en lugar de destino, la dirección de la empresa. Y seguidamente dar al botón "como llegar". Fuera a la web de google map, y le dijera como llegar.

chao

[derkenuke]

Hola airegrafico:

¿Qué problema hay? Si te pone paso por paso lo que debes hacer, te da ejemplos de cómo hacer cada cosa...
Se empieza por aquí http://code.google.com/apis/maps/index.html, mira los 4 pasos de la derecha.


Saludos.

[airegrafico]

el problema que tengo es que de javascript no se mucho. Y lo que necesito es un sitio que me lo explique lo mas sencillo posible. Porque aqui lo veo todo muy obtuso. Hay algún sitio que te lo explique a un nivel mas elemental.

gracias

[derkenuke]

Hola de nuevo:

Creo que vas a tener que peleártelo más que eso para que te podamos prestar ayuda. Prueba a buscar en google tu duda, ten en cuenta que muchísima gente habrá pasado por la situación:
como+incluir+google+maps+en+tu+web en google

Saludos.

[airegrafico]

alguien me puede decir porque en el campo donde hay en un texto que dice "buscar en el mapa", no se ha cambiado por "madrid". Para aqui así solo tenga que dar al botón "buscar" y tenga definida la busqueda.

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9acvgBR5Yb886HXTRNuW oRSDmDhWwrawVEvvR5oIeQp-m2M47hSOkl59yXInzRhxWrcx1A5pcpMl4w" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA9acvgBR5Yb886HXT RNuWoRSDmDhWwrawVEvvR5oIeQp-m2M47hSOkl59yXInzRhxWrcx1A5pcpMl4w" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>

<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");

#map {
border : 1px solid #979797;
width : 100%;
height : 600px;
}
</style>

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {

// Create and Center a Map
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.338511, -3.713933), 15);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch());
}
}
GSearch.setOnLoadCallback(load);
//]]>

// request that tabular search results should be suppressed
var options = {
resultList : google.maps.LocalSearch.RESULT_LIST_SUPPRESS
};
map.addControl(new google.maps.LocalSearch(options));

// no option needed, this is the default
map.addControl(new google.maps.LocalSearch());

// BUT, If you want to, you can explicityly request the default
var options = {
resultList : google.maps.LocalSearch.RESULT_LIST_INLINE
};
map.addControl(new google.maps.LocalSearch(options));

var options = {

linkTarget : GSearch.LINK_TARGET_BLANK,
searchFormHint : "madrid",
onIdleCallback : function() { alert("search control is idle");},
onSearchCompleteCallback : function() { alert("search is complete");},
suppressInitialResultSelection : true

};

searchcontrol = new google.maps.LocalSearch(options);

map.addControl(searchcontrol);
</script>

<script type="text/javascript">
// request that tabular search results be displayed in an external container
var options = {
resultList : document.getElementById("results")
};
map.addControl(new google.maps.LocalSearch(options));
...
<div id="results">Loading...</div>



var options = {
searchFormHint : "buscar Centro Reprografico Neptuno"
};
map.addControl(new google.maps.LocalSearch(options));
;

// request an "on idle" callback. This is called when a search is dismissed and
// when the search control initially loads
var options = {
onIdleCallback : function() { alert("search control is idle");}
};
map.addControl(new google.maps.LocalSearch(options));
;


// request an "on search complete" callback. This is called when a search completes
// and before results are placed on the map or tabular tabular result list
var options = {
onSearchCompleteCallback : function(searcher){
alert(searcher.results.length + " results");
}
};
map.addControl(new google.maps.LocalSearch(options));

;


// request an "on generate marker html" callback. This is called during the open of an info window.
var options = {
onGenerateMarkerHtmlCallback : extendMarker
};
map.addControl(new google.maps.LocalSearch(options));
...
function extendMarker(marker, html, result) {
// extend the passed in html for this result
myStuff = document.createElement("div");
div.innerHTML = "Bookmark This Result...";
html.appendChild(div);
return html;
}


// request an "on markers set" callback.
var options = {
onMarkersSetCallback : markersSet
};
myLocalSearchControl = new google.maps.LocalSearch(options);
map.addControl(myLocalSearchControl);
...
function markersSet(markers) {
// note: markers is an array of LocalResult
if (markers.length > 1) {
// grab the title of the 2nd result object
// if it matches starbucks, then alert
var title = markers[1].result.titleNoFormatting;
if (title.search(/starbucks/i) >= 0) {
alert(markers[1].result.titleNoFormatting);
}
}
}

var searchControl = new google.maps.LocalSearch();
map.addControl(searchControl);
...
searchControl.focus();


// request the the initial search result info window should not be
// auto-opened
var options = {
suppressInitialResultSelection : true
};
map.addControl(new google.maps.LocalSearch(options));


// instruct the system to NOT zoom on search complete
var options = {
suppressZoomToBounds : true
};
map.addControl(new google.maps.LocalSearch(options));


</script>
</head>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="98%"><table width="83%" border="0" cellpadding="0" cellspacing="0" bgcolor="#336633">
<tr>
<td align="left" valign="top" class="Estilo11">Formas de Pago </td>
</tr>
</table></td>
</tr>
<tr>
<td>
<div id="map" style="width: 500px; height: 300px"></div>
</td>
</tr>
</table>
</body>
</html>

[derkenuke]

Hola de nuevo:

Creo que te sobra como el 90% de código que has puesto ahí (parece el mismo código, pero con distintas configuraciones repetido 20 veces).

Así me ha funcionado a mi:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">

</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9acvgBR5Yb886HXTRNuW oRSDmDhWwrawVEvvR5oIeQp-m2M47hSOkl59yXInzRhxWrcx1A5pcpMl4w" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA9acvgBR5Yb886HXT RNuWoRSDmDhWwrawVEvvR5oIeQp-m2M47hSOkl59yXInzRhxWrcx1A5pcpMl4w" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>

<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");

#map {
    border : 1px solid #979797;
    width : 100%;
    height : 600px;
}
</style>

<script type="text/javascript">
//<![CDATA[
function load() {
    if (GBrowserIsCompatible()) {
        // Create and Center a Map
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(40.338511, -3.713933), 15);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        var options = {
            linkTarget : GSearch.LINK_TARGET_BLANK,
            searchFormHint : "madrid",
            //onIdleCallback : function() { alert("search control is idle");},
            //onSearchCompleteCallback : function() { alert("search is complete");},
            suppressInitialResultSelection : true
        };

        var searchcontrol = new google.maps.LocalSearch(options);
        
        // bind a search control to the map, suppress result list
        map.addControl(searchcontrol);
    }
}
GSearch.setOnLoadCallback(load);

</script>

</head>

<body>

    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td width="98%">
                <table width="83%" border="0" cellpadding="0" cellspacing="0" bgcolor="#336633">
                    <tr>
                        <td align="left" valign="top" class="Estilo11">Formas de Pago </td>
                    </tr>
                </table>
                </td>
        </tr>
        <tr>
            <td>
                <div id="map" style="width: 500px; height: 300px"></div>
            </td>
        </tr>
    </table>

</body>
</html> 
  

No sé si es lo que buscabas.


Saludos.

[airegrafico]

si esto era lo que buscaba.
muchas gracia. Eres un crack