And I've absolutely no idea why. It's the first time I try to do this with Maps API v3. The map is showing correctly, but nowhere a marker to be seen. Here's the code:
<script>
window.onload = function(evt) {
if(document.readyState === 'complete') {
var latlng = new google.maps.LatLng(50.833, 4.333);
var styles = [
{
stylers: [
{ hue: '#ffdd00' }
]
}
];
var myOptions = {
zoom: 16,
scrollwheel: false,
mapTypeControl: false,
disableDoubleClickZoom: true,
draggable: false,
navigationControl: false,
streetViewControl: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = '/img/marker.png';
map.addMarker({
lat: 50.833,
lng: 4.333,
title: 'Here it is',
icon: image,
});
}
}
</script>
Any ideas?
No addMarker() Method.
Try new google.maps.Marker()
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Here it is',
icon: image,
});
Related
I am using the Drawing Manager, and if the map place in the top/left position of the screen works perfectly, but when the map is in other position, the Drawing Manager draws the line but has a weird behaviour, the "next position point" is not centered where the mouse pointer is.
See the picture:
var lat = 40.4167754;
var lng = -3.7037901;
var mapOptions, map, maker, drawingManager;
function initialize() {
mapOptions = {
center: { lat: lat, lng: lng },
zoom: 13
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
maker = new google.maps.Marker({
position: { lat: lat, lng: lng },
map: map
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYLINE
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
'&libraries=geometry,visualization,drawing&signed_in=true&callback=initialize&key=XXX';
document.body.appendChild(script);
}
$(document).ready(function(){
loadScript();
});
The problem was due to the js version. The version 3 works perfectly, not the 3.exp
script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
'&libraries=geometry,visualization,drawing&signed_in=true&callback=initialize&key=XXX';
I have a simple test site to show google map here:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="js/GoogleMap/GoogleMap_thread_view.js"></script>
<link href="js/GoogleMap/GoogleMap.css" rel="stylesheet" />
<script type="text/javascript">$(document).ready(function () {
$("#googlemap").GoogleMap({addr: "105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh", lat: 43.37049234, lng: 30.3480382});
/*var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});*/
});</script>
</head>
<body style="width: 1000px; height: 600px;">
<div id="googlemap" style="width: 1000px; height: 600px; ">abc</div>
</body>
</html>
The page just shows grey div without map.
I searched around on this site but nothing works (resize window event, overflow: visible, width: 100% ... etc ...)
The thing is when I uncomment the Google's sample code, it works. So there must be something wrong with my script, file GoogleMap_thread_view.js
(function ($) {
var map, place, myMarker;
$.widget('4phuong.GoogleMap', {
options: {
addr: 'unknown',
lat: 0,
lng: 0,
zoom: 2
},
_create: function () {
var $widget = this;
$widget.element.children().hide();
$widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>');
$widget.element.append($widget._$container);
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);
myMarker = new google.maps.Marker({
map: map,
title: $widget.options.addr,
position: new google.maps.LatLng($widget.options.lat, $widget.options.lng)
});
},
destroy: function () {
this._$container.remove();
$.Widget.prototype.destroy.apply(this, arguments);
this.element.show();
},
control: function () {
return this._$control;
}
});
}(jQuery));
Could someone please tell me where I am wrong?
I know the reason. It's because I didn't give value to the field "zoom" when creating map. It should look like below
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoom: $widget.options.zoom,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
It's really stupid as Google should make default value for it.
This question already has answers here:
How to set zoom level in google map
(6 answers)
Closed 8 years ago.
I have tried everything but can't work out how to remove the fit to bounds part of this code and set a zoom level instead. The problem is this map is designed for multiple markers but I'm currently only using it with 1 and it zooms in too close.
var gmarkers = [];
var markers = [
[ '<div id="mapcontent">' +
'<a href ="#project0"><h4>43 Short Street</h4>' +
'</div>'
, -27.686478,153.131745]
];
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ featureType: 'all', stylers: [{saturation: -100},{brightness: 5} ]} ],
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
icon: './img/mapmarker.png',
position: pos,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
initializeMaps()
function myClick(id){
google.maps.event.trigger(gmarkers[id], 'click');
}
Thanks for your help!
Change
map.fitBounds(bounds);
to (or remove it)
// map.fitBounds(bounds);
Add your desired zoom and center when you initialize the map:
var myOptions = {
// change these per your desired center and zoom.
zoom: 4,
center: new google.maps.LatLng(desiredLat, desiredLng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
featureType: 'all',
stylers: [{
saturation: -100
},
{
brightness: 5
}]
}],
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
But if you only have one marker, you should also remove the loop.
I start with Google Map centered on a test marker and on click it switches to Street View with a set POV and ZOOM.
I want to be able catch and display Heading, Pitch and Zoom but I can't get the event listener to fire on pov_changed. I have added a few lines to show the settings that Street View starts on.
My code: http://jsfiddle.net/chrisloughnane/Q2GZT/
I have based my approach on http://quaystreet.chrisloughnane.net/index-view.html from a Google API example.... and still don't see why my listener wont fire.
Could someone point out what I'm doing wrong please?
(aside, I initially tried to get the POV settings in Chrome console and it just reported pano undefined etc. Is it possible to get access map/street view variables in the console?)
This is my code for the listener
google.maps.event.addListener(pano, 'pov_changed', function() {
document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
});
COMPLETE CODE
$(document).ready(function() {
function renderMap(){
var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
var myOptions = {
zoom: 7,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var iconBase = 'http://quaystreet.chrisloughnane.net/images/';
var markerPos = new google.maps.LatLng(53.270433, -9.054760999999985);
var marker = new google.maps.Marker({
position: markerPos,
map: map,
title: "Street Recal",
icon: iconBase + 'camera_small.png'
});
var pano = null;
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(19);
map.setCenter(marker.getPosition());
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), {
navigationControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
enableCloseButton: true,
addressControl: false,
linksControl: false,
panControl: false,
clickToGo: false,
scrollwheel: true,
draggable: false,
pov: {
heading: 24.061926972355707,
pitch: 1.942235903158224,
zoom: 1.5
}
});
pano.bindTo("position", marker);
pano.setVisible(true);
/* THIS IS PLACED HERE TO JUST SHOW SETTINGS CAN BE DISPLAY */
document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
});
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom = map.getZoom();
if(zoom<15) {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
} else {
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
}
});
/* THIS EVENT LISTENER */
google.maps.event.addListener(pano, 'pov_changed', function() {
document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
});
}
renderMap();
});
Move the pano event listener in to the code where it is defined:
updated fiddle
function renderMap(){
var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
var myOptions = {
zoom: 7,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var iconBase = 'http://quaystreet.chrisloughnane.net/images/';
var markerPos = new google.maps.LatLng(53.270433, -9.054760999999985);
var marker = new google.maps.Marker({
position: markerPos,
map: map,
title: "Street Recal",
icon: iconBase + 'camera_small.png'
});
var pano = null;
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(19);
map.setCenter(marker.getPosition());
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), {
navigationControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
enableCloseButton: true,
addressControl: false,
linksControl: false,
panControl: false,
clickToGo: false,
scrollwheel: true,
draggable: false,
pov: {
heading: 24.061926972355707,
pitch: 1.942235903158224,
zoom: 1.5
}
});
pano.bindTo("position", marker);
pano.setVisible(true);
/* THIS IS PLACED HERE TO JUST SHOW SETTINGS CAN BE DISPLAY */
document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
/* THIS EVENT LISTENER */
google.maps.event.addListener(pano, 'pov_changed', function() {
document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
});
});
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom = map.getZoom();
if(zoom<15) {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
} else {
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
}
});
}
I would like to know how to use itemtap to iterate through a list. I have a list right now which shows multiple items and when the user clicks on each, a map will appear showing the marker of the item. However, every item on the list seems to be showing the same thing. It is just showing the latest item on the list (first at the top). I would like to know what I'm doing wrong with the itemtap function. Thank You!!
Heres my controller where the itemtap function is:
Ext.define('demo.controller.News',{
extend:'Ext.app.Controller',
config:{
refs:{
NewsContainer:'newscontainer'
},
control:{
'newscontainer new list':{
itemtap:function(list, index, target, record){
var detailsView = Ext.create('demo.view.Mapo');
detailsView.setData(record.data);
this.getNewsContainer().push(detailsView);
}
}
}
}
});
And here is my map:
Ext.define('demo.view.Mapo', {
extend: 'Ext.Map',
xtype:'mapo',
config: {
title:'Incident Location',
iconCls:'maps',
layout:'fit',
draggable: true,
useCurrentLocation: true,
mapOptions: {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
},
initialize: function(){
var me = this;
me.on('maprender', function(comp, map){
var image = 'resources/images/current.png';
new google.maps.Marker({
position: new google.maps.LatLng(
this._geo.getLatitude(),
this._geo.getLongitude()
),
icon: image,
map: map,
title: "Current Location",
animation: google.maps.Animation.DROP
});
//Circle Radius
// var populationOptions = {
// strokeColor: "#FF0000",
// strokeOpacity: 0.8,
// strokeWeight: 1,
// fillColor: "#FF0000",
// fillOpacity: 0.35,
// map: map,
// center: new google.maps.LatLng(this._geo.getLatitude(),
// this._geo.getLongitude()),
// radius: 2000
// };
// var t = new google.maps.Circle(populationOptions);
for (i=0; i<Ext.getStore('news').getData().length; i++){
var data = Ext.getStore('news').getData().items[i].data
};
new google.maps.Marker({
position: new google.maps.LatLng(
data.Latitude,
data.Longitude
),
// icon: image,
map: map,
title: "Incident Location",
animation: google.maps.Animation.BOUNCE
});
});
me.callParent(arguments);
}
});