Añadir Google Maps con API v3

Añadir mapa con el bubble personalizado

function initialize() {
var secheltLoc = new google.maps.LatLng(<?=LATITUD?>, <?=LONGITUD?>);

var myMapOptions = {
zoom: 15
,center: secheltLoc
,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

var marker = new google.maps.Marker({
map: theMap,
draggable: true,
position: new google.maps.LatLng(<?=LATITUD?>, <?=LONGITUD?>),
visible: true
});

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #ec7c39; padding: 5px;";
boxText.innerHTML = "<?=REGISTRO?> <?=NOMBRE_REGISTRO?><br><?=CALLE?><br><?=CP?> <?=POBLACION?><br><?=PROVINCIA?><br>Tel. <?=TELEFONO?><br><?=HORARIO?>";

var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('public/jq-plugins/googlemaps/tipbox.gif') no-repeat"
,opacity: 0.80
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};

google.maps.event.addListener(marker, "click", function (e) {
ib.open(theMap, this);
});

var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
}

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="public/jq-plugins/googlemaps/infobox.js"></script>
<body onload="initialize()">
<div id="map_canvas" style="width:600px; height:444px;"></div>

descargar plugin

Añadir mapa de como llegar con la explicación de la ruta.


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var baga = new google.maps.LatLng(42.262066, 1.861382);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: baga
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
$(document).ready(function(){ $("#map-boto").click(function(){ calcRoute(); }); });
</script>

div#directionsPanel { height:100%; color:#999; font-size:11px; }
div#directionsPanel table { width:100%; }

<div id="map_canvas" style="width:680px; height:219px"></div>

<input type="text" id="start" value="Figueres" /> <input type="text" id="end" value="Bagà" /> <div id="map-boto">Obtener ruta</div>

<div id="directionsPanel"></div>

Añadir Google Maps con API v3

Entrades relacionades:

Deixa un comentari