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>
Related
I need to implement map and custom marker as shown here , here is the map implementation html http://jsfiddle.net/4a87k/ But no idea how to add custom css as marker.
<head>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap">
</script>
</body>
The documentation for customising markers is very good, find it here.
And a simple example is to link to a png file directly for the marker, but you can do more with this with Custom Markers in the api:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151}
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}
I tried this following codes:
It only appears like this
What i want to appear
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {
lat: 44.540,
lng: -78.546
},
zoom: 16
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
</html>
You need to add a marker to your map, here is the documentation for adding a marker in javascript: https://developers.google.com/maps/documentation/javascript/markers#add
It works like this:
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044}; //MARKER POSITION
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
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.
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>