Develop Reference

Google Maps API, Can't get marker to show up at all

I have the map up and running but I'm unable to plant a marker at the lat and long specified both in 'center' and 'position'. Does anyone see the error? I had this working earlier but after adding the style array, it stopped, I must have accidentally messed something up but I'm not seeing it now.
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(36, -110),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styleArray,
scrollwheel: false,
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
var styleArray = [
{
featureType: "all",
stylers: [ { saturation: -80 } ]
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [ { hue: "#00ffee" }, { saturation: 50 } ]
},
{
featureType: "poi.business",
elementType: "labels",
stylers: [ { visibility: "off" } ]
}
];
var marker = new google.maps.Marker({
position: (36, -110),
title:"Hello World!",
map: (google.maps.MapTypeId.ROADMAP),
});
marker.setMap(google.maps.MapTypeId.ROADMAP);
</script>

There are javascript errors in the posted code:
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: not an Object
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
You have several issues with your code:
Your marker is instantiated outside the initialize function (so it is instantiated before the map variable is defined. Move it inside the initialize function.
The marker.setMap function takes a google.maps.Map object as its argument, this is incorrect:
marker.setMap(google.maps.MapTypeId.ROADMAP);
should be:
marker.setMap(map);
This is incorrect, position needs to be a google.maps.LatLng object or a google.maps.LatLngLiteral, (36, -110) is neither, and the map property needs to be a google.maps.LatLng; this:
var marker = new google.maps.Marker({
position: (36, -110),
title:"Hello World!",
map: (google.maps.MapTypeId.ROADMAP),
});
should be:
var marker = new google.maps.Marker({
position: google.maps.LatLng(36, -110),
title:"Hello World!",
map: map,
});
proof of concept fiddle
code snippet:
var map;
function initialize() {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(36, -110),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styleArray,
scrollwheel: false,
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(36, -110),
title: "Hello World!",
map: map,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
var styleArray = [{
featureType: "all",
stylers: [{
saturation: -80
}]
}, {
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
hue: "#00ffee"
}, {
saturation: 50
}]
}, {
featureType: "poi.business",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
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>

4 Steps to make your marker appear.
Put your key in the JS library. Like this:
https://maps.googleapis.com/maps/api/js?sensor=false&key=[YOUR GOOGLE KEY]
Visit this page for detail.
Put your code of creating marker into your initialize method, just make sure it is initialized after the map is created.
The marker position should be an instance new google.maps.LatLng(36, -110) instead of your code (36, -110)
marker.setMap method is unnecessary, we can remove it.

Trying to apply an event listener to the <li> values in view model, shows google is not defined

The code may seem idiotic. This is my first try at using knockout.
I am working on a neighborhood map. The task is to invoke an event when any item on the list is clicked. The event is, when the item(place title) is clicked, the respective marker shows a infoWindow. I tried to implement it and ended up using google API function. Its not happening. I need a way solve this and make it happen.
HTML
<div>
<h1>Famous places in Bhubaneswar</h1>
<section class="main">
<form class="search" method="post" action="index.html" >
<input type="text" data-bind="textInput: filter" placeholder="Click here/Type the name of the place">
<ul style="list-style-type: none;" data-bind="foreach: filteredItems">
<li>
<span data-bind="text: title, click: $parent.showInfoWindow"></span>
</li>
</ul>
</form>
</section>
<div id="map"></div>
</div>
JS
var map;
var locations = [
{
title: 'Lingaraj Temple',
location:
{
lat: 20.2382383,
lng: 85.8315622
}
},
{
title: 'Odisha State Museum',
location:
{
lat: 20.2562,
lng: 85.8415
}
},
{
title: 'Dhauli',
location:
{
lat: 20.1923517,
lng: 85.8372062
}
},
{
title: 'Nandankanan Zoological Park',
location:
{
lat: 20.395775,
lng: 85.8237923
}
},
{
title: 'Udayagiri Caves',
location:
{
lat: 20.2631,
lng: 85.7857
}
},
{
title: 'Kalinga Stadium',
location:
{
lat: 20.2879847,
lng: 85.8215891
}
}
];
var center =[{lat : 20.2961, lng : 85.8245}]
var markers = []; // Creating a new blank array for all the listing markers.
var styles = [
{
featureType: 'water',
stylers: [
{ color: '#19a0d8' }
]
},
{
featureType: 'administrative',
elementType: 'labels.text.stroke',
stylers: [
{ color: '#ffffff' },
{ weight: 6 }
]
},
{
featureType: 'administrative',
elementType: 'labels.text.fill',
stylers: [
{ color: '#e85113' }
]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [
{ color: '#efe9e4' },
{ lightness: -40 }
]
},
{
featureType: 'transit.station',
stylers: [
{ weight: 9 },
{ hue: '#e85113' }
]
},
{
featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{ lightness: 100 }
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{ lightness: -100 }
]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'on' },
{ color: '#f0e4d3' }
]
},
{
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [
{ color: '#efe9e4' },
{ lightness: -25 }
]
}
];
function initMap() {
// Constructor creates a new map
map = new google.maps.Map(document.getElementById('map'), {
center: center[0],
zoom: 13,
styles: styles,
mapTypeControl: false
});
var largeInfowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var defaultIcon = makeMarkerIcon('0091ff'); // this is the default marker icon.
var highlightedIcon = makeMarkerIcon('FFFF24'); // this is the state of the marker when highlighted.
for (var i = 0; i < locations.length; i++) {
var position = locations[i].location; // Get the position from the location array.
var title = locations[i].title;
// var locationUrl = wikiLink(locations[i]);
// console.log(locationUrl);
wikiLink(locations[i]);
// Create a marker per location, and put into markers array.
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i,
// url: locationUrl
});
markers.push(marker); // Push the marker to our array of markers.
// Create an onclick event to open an infowindow at each marker.
marker.addListener('click', function() {
populateInfoWindow(this, largeInfowindow);
});
bounds.extend(markers[i].position);
marker.addListener('mouseover', function() {
this.setIcon(highlightedIcon);
});
marker.addListener('mouseout', function() {
this.setIcon(defaultIcon);
});
}
// Extend the boundaries of the map for each marker
map.fitBounds(bounds);
function wikiLink(location) {
location.url = '';
var wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + title + '&format=json&callback=wikiCallback';
//If you cant get a wiki request, throw an error message.
var wikiError = setTimeout(function() {
location.url = 'Unable to find the request';
}, 8000);
$.ajax({
url: wikiUrl,
dataType: "jsonp",
jsonp: "callback",
success: function(response) {
console.log(response);
var url = response[3][0];
console.log(url);
location.url = url;
console.log(location.url);
clearTimeout(wikiError);
}
});
};
}
// This function populates the infowindow when the marker is clicked. We'll only allow
// one infowindow which will open at the marker that is clicked, and populate based
// on that markers position.
function populateInfoWindow(marker, infowindow) {
// Check to make sure the infowindow is not already opened on this marker.
if (infowindow.marker != marker) {
infowindow.setContent(''); // Clear the infowindow content to give the streetview time to load.
infowindow.marker = marker;
// Make sure the marker property is cleared if the infowindow is closed.
infowindow.addListener('closeclick', function() {
infowindow.marker = null;
});
var streetViewService = new google.maps.StreetViewService();
var radius = 500;
// In case the status is OK, which means the pano was found, compute the
// position of the streetview image, then calculate the heading, then get a
// panorama from that and set the options
function getStreetView(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var nearStreetViewLocation = data.location.latLng;
var heading = google.maps.geometry.spherical.computeHeading(
nearStreetViewLocation, marker.position);
console.log(marker.position);
infowindow.setContent('<div>' + marker.title + '</div><hr><div id="pano"></div><div><a href=' + location.url + '> Click here for more info </a></div>');
var panoramaOptions = {
position: nearStreetViewLocation,
pov: {
heading: heading,
pitch: 30
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), panoramaOptions);
} else {
infowindow.setContent('<div>' + marker.title + '</div><hr>' + '<div>No Street View Found</div>');
}
}
// Use streetview service to get the closest streetview image within 50 meters of the markers position
streetViewService.getPanoramaByLocation(marker.position, radius, getStreetView);
infowindow.open(map, marker); // Open the infowindow on the correct marker.
}
}
// This function takes in a COLOR, and then creates a new marker icon of that color.
// The icon will be 21 px wide by 34 high, have an origin of 0, 0 and be anchored at 10, 34).
function makeMarkerIcon(markerColor) {
var markerImage = new google.maps.MarkerImage(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +
'|40|_|%E2%80%A2',
new google.maps.Size(21, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34),
new google.maps.Size(21,34));
return markerImage;
}
function viewModel(markers) {
var self = this;
self.filter = ko.observable(''); // this is for the search box, takes value in it and searches for it in the array
self.items = ko.observableArray(locations); // we have made the array of locations into a ko.observableArray
// attributed to - http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html , filtering through array
self.filteredItems = ko.computed(function() {
var filter = self.filter().toLowerCase();
if (!filter) {
return self.items();
} else {
return ko.utils.arrayFilter(self.items(), function(id) {
console.log(id.title);
return stringStartsWith(id.title.toLowerCase(), filter);
});
}
});
var stringStartsWith = function (string, startsWith) {
string = string || "";
if (startsWith.length > string.length)
return false;
return string.substring(0, startsWith.length) === startsWith;
};
// populateInfoWindow(self.filteredItems,)
this.listInfoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
this.showInfoWindow = function(marker) {
marker.addListener('click', function() {
populateInfoWindow(this, largeInfowindow);
});
}
}
// this.showInfoWindow = function(place) { // this should show the infowindow if any place on the list is clicked
// console.log(place.marker);
// google.maps.event.trigger(place.marker, 'click');
// };
}
ko.applyBindings(new viewModel());

You haven't shown it here, but I expect that you're loading the Google Map API asyncronously, and then trying to use that API in your JS/Knockout code before it has finished loading. I did this project, and I had that problem for a bit.
What you need to do is delay your JS code from running until the Google Map API has fully loaded in. You can do that with a callback. You can see it used on this page from the API's docs.

Map not showing first time I enter in the screen

The following html code loads a google map:
<div> Map :
<div ng-controller = "CreateNewEvent" id="map" style="width: 100%; height: 400px" data-tap-disabled="true" ng-init="initMap()"> </div>
</div>
which refers to the angular code:
// initialization of the map
$scope.initMap = function() {
$ionicLoading.show({
template: '<p>Loading...</p><ion-spinner icon="spiral" class="spinner-balanced"></ion-spinner>'
})
$scope.googleMap().then(function(results){
var latLng = results.latLng;
var map = results.map;
var marker = new google.maps.Marker({
position: latLng,
visible:true,
Map: map,
Icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' //personalize with icon
});
$timeout(function(){
alert('timeout')
$scope.$apply();
$ionicLoading.hide();
})
})
}
$scope.SetLatLong = function(){
var deferred = $q.defer()
alert('coords'+$scope.lat+'--'+$scope.long)
// geo coordinates
if($scope.lat!=undefined && $scope.long!=undefined){
var latLng = new google.maps.LatLng($scope.lat, $scope.long);
alert('lat'+JSON.stringify(latLng))
deferred.resolve(latLng);
return deferred.promise
} else {
alert('latelse')
var latLng = new google.maps.LatLng(51.5074, 0.1278)//London
deferred.resolve(latLng);
return deferred.promise
}
}
$scope.SetMapOptStyle = function(latLng){
var deferred1 = $q.defer()
var mapOptions = {
center: latLng,
zoom: 17,
disableDefaultUI: true,
clickableIcons: false,
disableDoubleClickZoom: true,
draggable: false,
keyboardShortcuts: false,
};
var styledMapType = new google.maps.StyledMapType(
[{
stylers: [
{ hue: '#00ffe6' },
{ saturation: -20 }
]
},{
featureType: 'road',
elementType: 'geometry',
stylers: [
{lightness: 100 },
{visibility: 'simplified' }
]
},{
featureType: 'road',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}],{
name: 'Styled Map'}
);
deferred1.resolve([mapOptions,styledMapType])
return deferred1.promise
}
// initialization of the map
$scope.googleMap = function() {
alert('googleMap')
// initilization of variables
var deferred = $q.defer()
var map1;
var latLng;
var mapOptions;
var styledMapType;
return $scope.SetLatLong().then(function(res){
latLng = res
return $scope.SetMapOptStyle(latLng).then(function(res1){
mapOptions = res1[0]
styledMapType = res1[1]
// map creation
map1 = new google.maps.Map(document.getElementById('map'), mapOptions);
// other options associated to the map style
map1.mapTypes.set('styled_map', styledMapType);
map1.setMapTypeId('styled_map');
// promise output
var results = {'map':map1,'latLng':latLng}
//alert('map--'+JSON.stringify(map1))
//alert('latlong--'+JSON.stringify(latLng))
deferred.resolve(results);
//return deferred.promise
return results
})
})
}
the problem is on the first time I load the screen. It seems that the map is loaded on the $scope of the previous screen so when the screen is loaded the map is missing. However if I refresh the page the map is correctly loaded in the page (so in the $scope). Maybe 'document.getElementById('map')' refers to the current page before refreshing? Any idea?

I found the solution: the screen that calls the map page contains itself a map. Both maps in the two pages refer to the same div id like:
<div> Map :
<div ng-controller = "CreateNewEvent" id="map" style="width: 100%; height: 400px" data-tap-disabled="true" ng-init="initMap()"> </div>
so id='map' in both screens. I did changed the id to 'map_edit' in one of the two screens and now the map is showing correctly (also document.getElementById('div_id') needs to be changed accordingly) . I think the problem is due to the refreshing of the page which is done after the map function initMap is called.

google maps api - unwanted transparent borders

Followed by this example: https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple
and made a custom one
my html(almost same, main diff. are var feartureOpts and var mapOtions):
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(52.330394, -23.661259);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ gamma: 1.56 },
{ lightness: 25 },
{ saturation: -100 }
]
}
];
var mapOptions = {
zoom: 17,
disableDefaultUI: true,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="witdh: 100%; height: 350px;"></div>
results:
QUESTION: how to remove those nasty semi-transparent square borders?

Please refer the below link.
http://jsfiddle.net/x5xXc/
<div id="map-canvas" style="witdh: 400px; height: 350px;"></div>
var featureOpts = [
{
stylers: [
{ gamma: 1.56 },
{ lightness: 25 },
{ saturation: -100 }
]
}
];

Two styled Google maps on single page

I'd appreciate some help setting up two Google maps (API 3) on a single page. They've got some shared styles. I can get a single one running, but not two together.
http://theredfrog.com/new/temp3.html - one map (ok)
http://theredfrog.com/new/temp4.html - two maps (broken)
Here's the script...
<script type="text/javascript">
function initialize() {
var styles = [
....
];
var hulloptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.7413176, -0.3353987),
zoom: 15,
mapTypeId: 'StyledHull'
};
var leedsoptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.796177,-1.541862),
zoom: 15,
mapTypeId: 'StyledLeeds'
};
maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
var rfdMarkerHull = new google.maps.Marker({
position: HullLatLng,
map: maphull,
icon: image
});
var rfdMarkerLeeds = new google.maps.Marker({
position: LeedsLatLng,
map: leedshull,
icon: image
});
var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

These two lines don't look right:
var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
Don't you get an error in the JavaScript console on those?
I think you meant:
var styledMapTypeHull = new google.maps.StyledMapType( styles, {
name: 'RFD Hull'
});
var styledMapTypeLeeds = new google.maps.StyledMapType( styles, {
name: 'RFD Leeds'
});
(also reformatted slightly for shorter lines)
Here's some more information and a working example.
And now that I try your second map in with the Developer Tools open in Chrome, I see there are other errors before it even gets that far.
First a warning:
Warning: you have included the Google Maps API multiple times
on this page. This may cause unexpected errors.
Then lazyload is undefined here in plugins.js:
$(".lazy").lazyload({
effect: "fadeIn",
effectspeed: 600,
failure_limit: 10
});
And then a mysterious-looking error inside some Maps API compressed code, but if you look at the call stack, you'll see your initialize function in the stack, and if you click on that it goes to this line:
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
Paste this into the JavaScript console and you'll see what's wrong:
document.getElementById("map-leeds")
And more errors after that, before even getting to the problem I saw while looking at your code.
So you have some debugging to do. Are you familiar with the Developer Tools in Chrome or another browser? If not, now it is time! Here is a great introduction to the Chrome DevTools.

Your problems are (you need to run through your code with a debugger):
typos (map: mapleeds, not map: leedshull,
ordering, you can't use variables before you initialize them
these are not valid: google.maps.StyledMapTypeHull, google.maps.StyledMapTypeLeeds (maybe a search and replace gone wrong. Should be google.maps.StyledMapType
<script type="text/javascript">
var maphull = null;
var mapleeds = null;
function initialize() {
var styles = [
{
stylers: [
{ saturation: -100 }
]
},{
featureType: 'water',
elementType: 'all',
stylers: [
{ lightness: -74 },
{ visibility: 'on' }
]
},{
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ lightness: -26 },
{ visibility: 'simplified' }
]
},{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ hue: '#efefef' },
{ lightness: 83 },
{ visibility: 'simplified' }
]
},{
featureType: 'poi',
elementType: 'all',
stylers: [
{ hue: '#999999' },
{ saturation: -100 },
{ lightness: -23 },
{ visibility: 'on' }
]
},{
featureType: 'road',
elementType: 'labels',
stylers: [
{ saturation: -100 },
{ visibility: 'on' }
]
}
];
var hulloptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.7413176, -0.3353987),
zoom: 15,
mapTypeId: 'StyledHull'
};
var leedsoptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.796177,-1.541862),
zoom: 15,
mapTypeId: 'StyledLeeds'
};
var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
var styledMapTypeHull = new google.maps.StyledMapType(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapType(styles, { name: 'RFD Leeds' });
maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
var rfdMarkerHull = new google.maps.Marker({
position: HullLatLng,
map: maphull,
icon: image
});
var rfdMarkerLeeds = new google.maps.Marker({
position: LeedsLatLng,
map: mapleeds,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>