"Uncaught SyntaxError: Unexpected token ," using google maps api - google-maps

im using google maps javascript api. on load in calling the initialize method as said in the api, but i keep getting "Uncaught SyntaxError: Unexpected token ," error but could not find the source why im getting this error.
Please Help. Thanks in advance
<script type='text/javascript'>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922)
};
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window,'load',initialize);
</script> `

I ran the script through JSHint:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function () {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function () {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
This is now syntax-error-free. My guess is that the lines that had
var map = new google.maps.Map(document.getElementById('geochart-view-wrapper'),
mapOptions);
were causing it.
By the way, formatting your code will make it easier to identify logic errors, syntax errors, closure errors, etc.

Related

zoom_changed triggering repeatedly on page load

Using the Google Maps API, I've got two listeners in my initMap() function:
google.maps.event.addListener(map, 'dragend', function(e) {
var searchType=location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
});
google.maps.event.addListener(map, 'zoom_changed', function(e) {
var searchType=location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
});
The first one works fine, but the second (zoom_changed) triggers several times while the page is loading, causing all kinds of chaos. How can I prevent this?
For testing purposes, I've tried changing to bounds_changed but it also triggers an extra time when the page is loading.
There must be something else causing what you describe. Just loading a map doesn't trigger a zoom change as you can see in the below example.
function initialize() {
var myLatLng = new google.maps.LatLng(46.2,6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(map, 'zoom_changed', function() {
alert('Zoom Changed');
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
I found a way to prevent the zoom_changed listener from loading until the map has finished loading:
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
google.maps.event.addListener(map, 'zoom_changed', function (e) {
// var eventListener = google.maps.event.addListener(this.map, "bounds_changed", function () {
var searchType = location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
// });
});
})

Problems with geolocation

I want to make an application that shows your current position on a map with a marker. The code I've done seems to work but it doesn't display the marker. Can someone help me, please?
Here's my app.js:
var app = angular.module('starter', ['ionic', 'ngCordova']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.controller('MapController', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$ionicPlatform.ready(function() {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
$ionicLoading.hide();
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
google.maps.event.addListener($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(myLatlng)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
infowindow.open(map, marker);
});
})
});
You are using
var long = position.coords.longitude;
whereas long is a keyword in javascript. Check the link below.
https://www.w3schools.com/js/js_reserved.asp
Unless you are using ECMAScript 5/6 standard
Try to add Latitude and Longitude in following way to new google.map.LatLng(...)
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(lat, long)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
Hope this will help to you
Spent a very hair-tearing hour or so trying to get the good old W3C geolocation example to work in my particular application. Didn't see this:
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
If you are NOT using https you may (will?) get a silent, non-functioning outcome, both in Chrome and Firefox! As soon as I switched to https, it was fine.

Google Maps API - Activating the infowindow of a custom marker

I am trying to activate the infowindow for a custom marer, yielding a small description about the marker, I'm having some trouble at the moment, I have the custom marker working but I can't get the infowindow to show.
I tried calling the listener for the marker and storing it in a variable "customMarker", then calling another mouseover listener to activate the infowindow, but I'm having no luck, can anyone help me out?
var map;
//Creates a custom icon to be placed on the map
var goldStar = 'https://cdn2.iconfinder.com/data/icons/august/PNG/Star%20Gold.png';
function initialize() {
//Sets the zoom amount for the map, the higher the number, the closer the zoom amount
var mapOptions = {
zoom: 18
//center : myLatLng
};
//The map object itself
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Tries to find user location using HTML 5
if(navigator.geolocation)
{
//sets the map to the position of the user using location
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
//This listener is not working
//google.maps.event.addListener(customMarker, 'mouseover', function() {
//infowindow.open(map,customMarker);
//});
}
function placeMarker(location, map)
{
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable:true
});
map.panTo(location);
}
The google.maps.event.addListener function does not return a marker. This won't work:
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
Assign the event listener in your placeMarker function to the marker you create (also gives the advantage of maintaining function closure on the marker):
function placeMarker(location, map) {
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable: true
});
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
map.panTo(location);
}
working fiddle

google maps add single marker on click don't works

I've googled and searched deeply in stackoverflow with no results.
i have the following code:
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(45.47554, 9.204712),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(map, "click", function (event) {
alert("click");
});
</script>
and when I click on map I haven't the alert. Where am I wrong please? Thank you.
You mentioned no way to add a marker, in this case to add a marker in the map you can use following code
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
// options
});
// Add a marker at center/current latlng
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Some Title'
});
// To add a click event on the marker you can use
google.maps.event.addListener(marker, 'click', function() {
// ...
});
}
Read more.

Google Maps API InfoWindow not Displaying content

My Code looks like this:
var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var infobox = new google.maps.InfoWindow({
content: 'Hello world'
});
for(i in results){
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('blablabla');
infobox.open(map,marker);
alert(infobox.content); //displays 'blablabla'
});
}
}
});
Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.
Problem is: the infoWindow displays empty.
Screenshot here:
PS: Using Maps API V3
I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.
Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see:
http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
Here is how I have done it.
var map,markersArray,infowindow; //infowindow has been declared as a global variable.
function initialize(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.5001524,-0.1262362),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
markersArray = [];
}
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}
You can find the working example here and the complete javascript here.
I have resolved issue by adding below code.
setTimeout(function () { GeocodeMarker.info.open(GoogleMap,
GeocodeMarker); }, 300);
Thanks