I've searhced the site for this error and, while there were several answers, none of them worked for me (or weren't applicable).
I am using google maps API v3 and am trying to implement OverlappingMarkerSpiderfier to solve my problem of overlapping markers. My problem is that I cannot create an instance of an OMS:
function getStateInfo(){
//do stuff
var lat = 42.5724;
var lon = -74.948052;
var map = new google.maps.Map(document.getElementById("map"),{draggableCursor:'pointer'});
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true});
// do more stuff
var whiteicon = new GIcon();
whiteicon.image = "images/whiteCircle.png";
whiteicon.iconSize = new GSize(11, 11);
whiteicon.iconAnchor = new GPoint(6, 6);
whiteicon.infoWindowAnchor = new GPoint(6,6);
var marker = new GMarker(new GLatLng(lat,lon), {
draggable: false,
title: ($(this).find('COMPANY_NAME').text()),
icon: whiteicon,
map: map
});
oms.addMarker(marker);
}
I get the following error:
InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
I have verified that the error occurs at the time of instantiation and not at marker creation/placement. For thoroughness, here is the code I am trying to use to place markers:
var marker = new GMarker(new GLatLng(lat,long), {
draggable: false,
title: ($(this).find('COMPANY_NAME').text()),
icon: whiteicon,
map: map});
...
oms.addMarker(marker);
I have also retrieved a different copy of OMS in the event that there was something wonky with the original (downloaded from github).
If you need to see more code, just let me know what you are looking for. I just posted the lines which are the problem. My map generates properly without OMS - it's just the oms instantiation that is the problem.
You are using a deprecated Google Maps JavaScript API v2 map with a Google Maps JavaScript API v3 spiderifier.
This is v2 code (GSize, GPoint, GLatLng):
whiteicon.iconSize = new GSize(11, 11);
whiteicon.iconAnchor = new GPoint(6, 6);
var marker = new GMarker(new GLatLng(lat,lon), {
Related
I have create a Google Map using however, it has a lot of markers and it has become unwieldy to have them in the the same html file. To use the markers I first create a array as follows;
var markers = [
['Balham Leisure Centre',51.441234,-0.152297,'leisure_center.png'],
['Putney Leisure Centre',51.463955,-0.228771,'leisure_center.png'],
['Latchmere Leisure Centre',51.470967,-0.163805,'leisure_center.png']
]
then utilise them as follows;
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: iconBase + markers[i][3],
});
}
I would like to store the markers array in a separate text file like;
['Balham Leisure Centre',51.441234,-0.152297,'leisure_center.png'],
['Putney Leisure Centre',51.463955,-0.228771,'leisure_center.png'],
['Latchmere Leisure Centre',51.470967,-0.163805,'leisure_center.png']
then have the main page read that file and put it into the markers array so that everything still works the same.
Since you don't use any frameworks, in native JS you want to use XMLHttpRequest object. Save your data in a separate file (you might want to use JSON for example) and then follow the code below.
Basic usage:
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
console.log(req.responseText);
}
}
req.open('GET', url);
req.send();
Readmore: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
I'm now use the node.js platform. And I want to use googlemap cluster library. However I can't execute the source code.
googlemaps cluster api url : https://github.com/googlemaps/js-marker-clusterer
This library's index is below.
dosc
examples
images
src
etc..
In the directory of examples, I want to test a "simple_example.html".
My node.js source code is below.
[app.js]
var express = require("express");
var app = express();
app.set('view engine','ejs');
var path = require("path");
app.set("public", path.join(__dirname, "public"));
app.get('/', function(req, res){
res.render("simple_example", {} )
});
app.listen(3000);
console.log("Running at Port 3000");
[simple_example.ejs] (important script part)
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="public/data.json"></script>
<script type="text/javascript" src="public/src/markerclusterer.js"></script>
<script>
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'public/images/m'});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This picture is result of execute by my source code. but the picture doesn't have markered in the map. I expected picture is below.
I tried path change of src, change web platform(as python) but I can't solve the problem. Who know the solution?
Once you create a marker cluster, support it by using addMarker() method or by providing a array of markers to the constructor.
When they say add marker to constructor by providing a array of markers it's similar to doing this:
var markers = []; //create a global array where you store your markers
for (var i = 0; i < 100; i++) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker); //push individual marker onto global array
}
var markerCluster = new MarkerClusterer(map, markers); //create clusterer and push the global array of markers into it.
To add it using addMarker() you basically add it to the cluster like the following:
var markerCluster //cluster object created on global scope
//do your marker creation and add it like this:
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map
Here's a reference to MarkerCluster: https://googlemaps.github.io/js-marker-clusterer/docs/examples.html
Also, here's a demo app how to use markercluster: https://github.com/googlemaps/js-marker-clusterer
how can add a custom image marker in here map,
i can add markers in map by using this code:
var map, standardMarker;
map = new nokia.maps.map.Display(mapContainer, {
center: [lat, log],
zoomLevel: 12,
components: [new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector()]
});
standardMarker = new nokia.maps.map.StandardMarker(map.center);
map.objects.add(standardMarker);
but the problem is map contains many markers ,so i need small custom markers.
can anyone help me!?
nokia.maps are old version of the HERE map JavaScript API version 2.5, you can use new version of HERE map JS API 3.0. I recommend for new developments to use the latest 3.0 version.
https://developer.here.com/documentation
and some examples http://developer.here.com/api-explorer
/**
* Step 1: initialize communication with the platform
*/
var platform = new H.service.Platform({
app_id: hereMapAppID,
app_code: hereMapAppCode,
useHTTPS: true,
useCIT: false
});
var defaultLayers = platform.createDefaultLayers();
var mapContainer = document.getElementById('hereMapDivId');
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(mapContainer,
defaultLayers.normal.map,{
center: {lat: 53.430, lng: -2.961},
zoom: 7
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
var yourMarker = baseUrl+'/images/ico/your_marker.png';
var icon = new H.map.Icon(yourMarker);
marker = new H.map.Marker(map.center, { icon: icon });
var group = new H.map.Group();
map.addObject(group);
group.addObject(marker);
Add Custom Marker From Your System
function addMarkerToGroup(group, coordinate, html) {
var marker = new H.map.Marker(coordinate,{ icon: pngIcon });
// add custom data to the marker
marker.setData(html);
group.addObject(marker);
}
var yourMarker = '<PATH_OF_IMG/IMG_NAME>';
var pngIcon = new H.map.Icon(yourMarker, {size: {w: 56, h: 56}});
I am having some troubles using the geometry at google maps. I am getting the following error:
"Unable to get property 'spherical' of undefined or null reference."
This is some code from w3c with some additions of mine.
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
try{
var markerpos = google.maps.geometry.spherical.interpolate(flightPath.getAt(0), flightPath.getAt(1), .5);
// also tried //
//var Spherical = google.maps.geometry.spherical;
//var markerpos = Spherical.interpolate(flightPath.getAt(0), flightPath.getAt(1), .5);
//var markerpos = google.maps.geometry.spherical.interpolate(amsterdam, london, .5);
}
catch(ex){alert(ex);}
var marker = new google.maps.Marker({position: markerpos,
map: map, clickable: false
});
}
What is wrong with the above code?
Are you loading the correct library with the libraries= parameter?
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=geometry"></script>
If you are using #googlemaps/js-api-loader, include it like this instead
const loader = new Loader({
apiKey: "xxxxxxxxxx",
version: "weekly",
libraries: ["geometry"], // additional libraries
});
First you need to import libraries modules and then auth key module.
I think here the problem is at the time of executing library functions importing library modules is not completed.
If you import auth key module first what happened is immediately it calls the initialize() method by the time library modules loading is not completed.
So you need to import library modules first and then auth module.
I'm having a conflict, between Directions & user GeoCode Detection.
If I do this:
var MapCenter = new google.maps.LatLng(-33.8665433, 151.1956316);
function initialize(lat,lng) {
geocoder = new google.maps.Geocoder();
// var MapCenter = new google.maps.LatLng(lat,lng);
geocodeThis(MapCenter);
the directions work fine, but the GeoCoder doesn't get the user's location.
And if I do it like this:
// var MapCenter = new google.maps.LatLng(-33.8665433, 151.1956316);
function initialize(lat,lng) {
geocoder = new google.maps.Geocoder();
var MapCenter = new google.maps.LatLng(lat,lng);
geocodeThis(MapCenter);
the GeoCoder gets the user location, but when you click on the InfoWindow, and then in directions, the script doesn't do anything. Instead it should give you directions to that marker from your current (just GeoCoded) location.
Here is my full code.
You should call the variables with different names. They are both called "MapCenter", of course they conflict...
What are you trying to achieve?