I am facing problem in magento for the google map.
I have controller as the following:
class MapSoftware_Map_Adminhtml_MapbackendController extends Mage_Adminhtml_Controller_Action
{
public function indexAction()
{
$this->loadLayout();
$this->_title($this->__("MapSales"));
$block = $this->getLayout()->createBlock('core/text', 'example-block')->setTemplate('map/mapbackend.phtml')->toHtml();
$this->_addContent($block);
$this->renderLayout();
}
}
I am going to use mapbackend.phtml file and its code is given below
<style>
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
#map-canvas img {
max-width: none;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather,places,drawing"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(0.1768697,37.9083264),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new
google.maps.Map(document.getElementById('mapcanvas'),mapOptions);
var image = 'https://cdn0.iconfinder.com/data/icons/small-n-
flat/24/678111-map-marker-32.png';
var myLatLng = new google.maps.LatLng(0.1768697,37.9083264);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 96%; height: 500px; position: absolute;"></div>
So now my problem is when I go through the page it's showing only the map and not the controllers. This code is running on local machine but it's not working on magento.
Please help me , I am stuck with this part, also I am new in magento.
I think this is a Google Map bug in the latest version that makes the map controls not visible and throws a JS error. I have seen the same problem in other places. Try with v3.17 instead.
Related
How to left align the google maps, I mean the marker positions. Here is my JS
function showGoogleMaps() {
var latLng = new google.maps.LatLng(position[0], position[1]);
var mapOptions = {
zoom: 16,
zoomControl:false,
mapTypeControl:false,
streetViewControl: false, // hide the yellow Street View pegman
scaleControl: true, // allow users to zoom the Google Map
mapTypeId:ROADMAP,
center: latLng,
scrollwheel: false,
styles: styles
};
map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);
// Show the default red marker at the location
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false,
title: 'Hello',
animation: google.maps.Animation.DROP
});
}
Here are the screenshots
The default marker location
How I want this to be
The marker or location is centered by default. I want that either to the left or right by default.
Thanks
A simple approach:
Initially set the width of the map to e.g 30%.
The center of the map now will be in the middle of these 30%.
Once the map is loaded set the width of the map to 100%.
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('googleMap'), {}),
markers = [{
pos: new goo.LatLng(26.1445169, 91.7362)
}, {
pos: new goo.LatLng(26.2571285, 92.05991)
}, {
pos: new goo.LatLng(26.3143518, 91.0497609)
}, ],
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
new google.maps.Marker({
map: map,
position: markers[i].pos
});
bounds.extend(markers[i].pos);
}
map.fitBounds(bounds);
goo.event.addListenerOnce(map, 'idle', function() {
this.getDiv().style.width = '100%';
goo.event.trigger(this, 'resize');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_wrapper,
#googleMap {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#googleMap {
width: 30%;
}
<div id="map_wrapper">
<div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
To align the markers on the right additionally use the panBy-method:
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('googleMap'), {}),
markers = [{
pos: new goo.LatLng(26.1445169, 91.7362)
}, {
pos: new goo.LatLng(26.2571285, 92.05991)
}, {
pos: new goo.LatLng(26.3143518, 91.0497609)
}, ],
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
new google.maps.Marker({
map: map,
position: markers[i].pos
});
bounds.extend(markers[i].pos);
}
map.fitBounds(bounds);
goo.event.addListenerOnce(map, 'idle', function() {
this.getDiv().style.width = '100%';
this.panBy(-(this.getDiv().offsetWidth/1.5),0);
goo.event.trigger(this, 'resize');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_wrapper,
#googleMap {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#googleMap {
width: 30%;
}
<div id="map_wrapper">
<div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
I've been trying for ages to get a marker on this map, same location as center, but can't get it to work.
<html>
<head>
<style>
#map {
width: 100%x;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(59.909968, 10.748012),
zoom: 16,
zoomControl: true,
scaleControl: true,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
I've tried following the instructions here, but I can't get it to work..
Any ideas? I had it working on my site using an iframe, but had issues scrolling past the full width map without getting caught zooming in, so I'm looking for a way to make this code to replace it.
Following the example you link to works for me (setting the marker to the map center):
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(59.909968, 10.748012),
zoom: 16,
zoomControl: true,
scaleControl: true,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
// from https://developers.google.com/maps/documentation/javascript/examples/marker-simple
var marker = new google.maps.Marker({
// change the position to the map center
position: map.getCenter(),
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Can some one please let me know if it is possible to have an overview map on top of google map?
ArcGIS API is offering this widget at this link so I would like to know that if we can do the same on Google Map>
Thanks
See the documentation of the Google Maps Javascript API v3 Overview
To open it by default, add this to your mapOptions:
overviewMapControl: true,
overviewMapControlOptions: {opened: true}
proof of concept fiddle
code snippet:
function initialize() {
var map;
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(53.382971, -1.4702737),
mapTypeId: 'roadmap',
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
Here is my code for a google map
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 900px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(18.979026,16.468506),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
name: 'Parking',
icon: iconBase + 'parking_lot_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'Parking'
}
var map = new google.maps.Map(map_canvas, map_options)
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Why is it wrong?
All what it is supposed to do is be centered and have a marker with the icon parking at a certain lat & long.
I tried following the google tutorial, but I understand it
So any help would be much appreciated
Use MarkerImage to place an custom icon
img = new google.maps.MarkerImage('parking_lot_maps.png');
then
Marker = new google.maps.Marker({
position: pos,
icon: img,
});
When I use Google Maps as an anonymous user, when I find a company that I'm building a website for, Google shows me some kind of a default street view photo for that place. It's quite nice and I would like to have this photo appear also in my custom InfoWindow that I'm preparing using API3. Is there a method for that or should I sniff and use its source path?
You can embed the street view panorama like this, or embed a screen capture image in the infowindow contents (<img src="...">) Also you may set the marker visible: false
http://jsfiddle.net/sST8z/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100% }
#map_canvas { margin: 0; padding: 0; width: 500px; height: 300px }
#street { margin: 0; padding: 0; width: 150px; height: 150px }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
street = new google.maps.StreetViewPanorama(document.getElementById("street"), {
position: new google.maps.LatLng(40.72982797782924, -73.98622512817383),
zoomControl: false,
enableCloseButton: false,
addressControl: false,
panControl: false,
linksControl: false
});
var infow = new google.maps.InfoWindow({ content: document.getElementById("street") });
var myLatLng = new google.maps.LatLng(40.72982797782924, -73.98622512817383);
var marker = new google.maps.Marker({ position: myLatLng, map: map, visible: true });
infow.open(map, marker);
map.setCenter(myLatLng);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="street"></div>
<div id="map_canvas"></div>
</body>
</html>