Develop Reference

Googlemaps api v3: Markers not showing in Android Browser - javascript

Morning,
I have created a mobile web app which plots multiple nearby locations on a Googlemap using API v3.
This works fine in Mobile Chrome, Mobile Firefox & Mobile Opera, but does not work properly in Androids native browser. In the latter, the markers are not shown. It does not give me error messages either.
The URI is
213.175.198.56/~webdesig/restaurants/
Here is the code:
<div id="map1" class="gmap"></div>
<script type="text/javascript">
var map1, latlng1, options1;
var distance = 2000;
function initialize() {
latlng1 = new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("long"));
options1 = { zoom: 12, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP };
//map1 = new google.maps.Map(document.getElementById("map1"), options1);
map1 = new google.maps.Map(document.getElementById('map1'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng1,
zoom: 12
});
var request = {
location: latlng1,
radius: distance,
types: ['restaurant', 'cafe']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map1);
service.nearbySearch(request, callback);
document.getElementById('showing').innerHTML = "Showing restaurants within "+distance+" metres of your location";
}// initialize
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}else{
alert('Unable to plot');
}
}
// Function for adding a marker to the page.
function addMarker(mylocation) {
marker = new google.maps.Marker({
position: mylocation,
map: map1
});
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var request2 = { reference: place.reference };
service.getDetails(request2, function(details, status) {
google.maps.event.addListener(marker, 'click', function() {
var rating = details.rating;
if(!rating){rating = 'Not yet rated';}
infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />Rating: " +rating + "<br /><input type=\"button\" onclick=\"location.href='tel:" + details.formatted_phone_number+"'\" value=\"Call "+details.name+" \"/>");
infowindow.open(map1, this);
});
});
var image = new google.maps.MarkerImage(
'images/icons/restaurant.png',
new google.maps.Size(32,50),
new google.maps.Point(0,0),
new google.maps.Point(16,50)
);
var shadow = new google.maps.MarkerImage(
'images/icons/restaurantshadow.png',
new google.maps.Size(60,50),
new google.maps.Point(0,0),
new google.maps.Point(16,50)
);
var shape = {
coord: [28,0,29,1,30,2,31,3,31,4,31,5,31,6,31,7,31,8,31,9,31,10,31,11,31,12,31,13,31,14,31,15,31,16,31,17,31,18,31,19,31,20,31,21,31,22,31,23,31,24,31,25,31,26,31,27,31,28,30,29,29,30,28,31,21,32,21,33,20,34,20,35,20,36,20,37,19,38,19,39,19,40,18,41,18,42,18,43,18,44,17,45,17,46,17,47,16,48,16,49,15,49,15,48,15,47,15,46,14,45,14,44,14,43,13,42,13,41,13,40,12,39,12,38,12,37,11,36,11,35,11,34,10,33,10,32,3,31,2,30,1,29,0,28,0,27,0,26,0,25,0,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,0,3,1,2,2,1,3,0,28,0],
type: 'poly'
};
var marker = new google.maps.Marker({
icon: image,
shadow: shadow,
shape: shape,
map: map1,
position: place.geometry.location
});
/*google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name+'<br/>'+place.formatted_address);
infowindow.open(map1, this);
});*/
}
$('.page-map1').live("pagecreate", function() {
initialize();
});
$('.page-map1').live('pageshow',function(){
//console.log("test");
google.maps.event.trigger(map1, 'resize');
map1.setOptions(options1);
// Testing the addMarker function
here = new google.maps.LatLng(localStorage.getItem("lat"), localStorage.getItem("long"));
addMarker(here);
});
</script>

Related

I have tried to make autocompletion for my application and show this to my Google maps but it doesn't works well.
The code is in a seperate js file called autocomplete.js
I already have a google maps in app so I want to use the same.
The id of google map is: googleMap
The id of search button is: autosearch
The id of input is: autoinput
"use strict";
var input = document.getElementById('autoinput');
var options = {
bounds: defaultBounds,
types: ['establishment']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
var input = document.getElementById('autoinput');
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'be'}
};
function fillInAddress() {
var place = autocomplete.getPlace();
var defaultBounds = document.getElementById('googleMap')(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
var input = document.getElementById('autoinput');
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds
});
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
};
I changed code etc but i guess i deleted something that i need.
This is the other js file for geolocation called locationSearch.js:
var google;
$( document ).ready(function() {
zoekLocatie();
});
function zoekLocatie() {
var output = document.getElementById("googleMap");
navigator.geolocation.getCurrentPosition(success, error);
output.innerHTML = "<p>Looking for your location...</p>";
if (!navigator.geolocation) {
output.innerHTML = "<p>Your browser doesn't support geolocation</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var mapProp = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
geocodeLatLng(geocoder, map, infowindow);
function geocodeLatLng(geocoder, map, infowindow) {
var input = latitude + "," + longitude;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(18);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
address.innerHTML = results[1].formatted_address;
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}

you have a error here
use strict";
you should remove the "
And where you call your google map function ?

I have a problem with my GeoJson layers which I want to cluster (with MarkerClusterer) and then be able to show and hide them via checkboxes or similar. Therefore I tried something like the code below:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.515696, 13.392624),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var bounds = new google.maps.LatLngBounds();
var barLayer = new google.maps.Data();
var cafeLayer = new google.maps.Data();
barLayer.loadGeoJson('json/eat_drink/bar.geojson');
cafeLayer.loadGeoJson('json/eat_drink/cafe.geojson');
var markerClusterer = new MarkerClusterer(map);
var infowindow = new google.maps.InfoWindow();
markerClusterer.setMap(map);
function displayMarkers(layer) {
var layer = layer;
google.maps.event.addListener(layer, 'addfeature', function (e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
// open the infoWindow when the marker is clicked
google.maps.event.addListener(marker, 'click', function (marker, e) {
return function () {
var myHTML = e.feature.getProperty('name');
infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infowindow.setPosition(e.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map, marker);
};
}(marker, e));
markerClusterer.addMarker(marker);
bounds.extend(e.feature.getGeometry().get());
map.fitBounds(bounds);
map.setCenter(e.feature.getGeometry().get());
}
});
layer.setMap(null);
google.maps.event.addListener(map, "click", function () {
infowindow.close();
});
};
document.getElementById('bar').onclick = function(){ // enable and disable markers
if(document.getElementById('bar').checked == true){
displayMarkers(barLayer);
}else{
return null;
}
};
}
Unfortunatley this doesn't work and I don't no exactly why.
If I remove the displayMarkers() function around the code and replace "layer" with the desired GeoJson layer, e.g. "barLayer", it works just fine.
Since I will end up with tons of GeoJason layers I would prefer a "compact" solution like this insted of copying the code multiple times. Have you guys any ideas how to do that properly?

I'm afraid I haven't done much more than refactor your code. Could you give this a try, and if it doesn't work specify exactly what doesn't work?
function displayMarkers(layer, map, markerClusterer) {
google.maps.event.addListener(layer, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
// open the infoBox when the marker is clicked
google.maps.event.addListener(marker, 'click', function(e) {
var myHTML = e.feature.getProperty('name');
var infowindow = new google.maps.InfoWindow();
infowindow.setContent("<div style='width:150px; text-align: center;'>" + myHTML + "</div>");
infowindow.setPosition(e.feature.getGeometry().get());
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -30)
});
infowindow.open(map, marker);
google.maps.event.addListener(map, "click", function() {
infowindow.close();
});
});
markerClusterer.addMarker(marker);
var bounds = new google.maps.LatLngBounds();
bounds.extend(e.feature.getGeometry().get());
map.fitBounds(bounds);
map.setCenter(e.feature.getGeometry().get());
}
});
layer.setMap(null);
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.515696, 13.392624),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var barLayer = new google.maps.Data();
var cafeLayer = new google.maps.Data();
barLayer.loadGeoJson('json/eat_drink/bar.geojson');
cafeLayer.loadGeoJson('json/eat_drink/cafe.geojson');
var markerClusterer = new MarkerClusterer(map);
markerClusterer.setMap(map);
document.getElementById('bar').onclick = function() { // enable and disable streetViewControl
if (document.getElementById('bar').checked == true) {
displayMarkers(barlayer, map, markerClusterer);
} else {
return null;
}
};
}

Im trying to load around 600 googlemap markers on page load using the function addMarker.
The page takes a lot of time to load.
Is there anything I can do to make it load faster while keep using the addMarker function?
Thanks.
var map
var myLatlng = new google.maps.LatLng(35.9531719,14.3712201);
var markerBounds = new google.maps.LatLngBounds();
var markers = {};
function HomeControl(controlDiv, map)
{
google.maps.event.addDomListener(zoomout, "click", function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0)
{
map.setZoom(currentZoomLevel - 1);
}
});
google.maps.event.addDomListener(zoomin, "click", function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21)
{
map.setZoom(currentZoomLevel + 1);
}
});
}
function initialize()
{
var googleMapOptions = {
center: new google.maps.LatLng(35.9531719,14.3712201),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
streetViewControl: false,
panControl: false,
draggable: true
};
map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
google.maps.event.addListener(map, "idle", function() {
addMarker(latitude,longitude,id,'Title','url');
});
var homeControlDiv = document.createElement("div");
var homeControl = new HomeControl(homeControlDiv, map);
}
var infowindow = new google.maps.InfoWindow({
content: ""
});
function addMarker(lat,long,id,desc,url)
{
var myIcon = new google.maps.MarkerImage("/images/pips/"+id+".png", null, null, null, new google.maps.Size(28,38));
var myLatlng = new google.maps.LatLng(lat,long);
var marker = new google.maps.Marker({
map: map,
title: desc,
position: myLatlng,
icon: myIcon,
id: id
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('' + desc + '');
infowindow.setPosition(marker.getPosition());
infowindow.open(map, marker);
});
markers[id] = marker;
markerBounds.extend(myLatlng);
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>

You can use clustering, it joins neighbor markers into one, and expand only on zoom
You can do clustering in client side, as well as server side, depending the amount of markers...
I would suggest to use server clustering if amount is more than 4000, otherwise client should look fine

I am trying to display a list of the places and their phone numbers on the ride side bar. the phone numbers work when i click on the markers but show up as undefined in the side bar. any help is great thanks.
$(document).ready(function(){
var map = null;
var gmarkers = [];
var service = null;
var infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50)});
function initialize() {
var slo = new google.maps.LatLng(35.2742, -120.6631);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slo,
zoom: 11
});
service = new google.maps.places.PlacesService(map);
var request = {
location: slo,
radius: 30000,
types: ['hospital']
};
infowindow = new google.maps.InfoWindow();
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
if (place.icon) {
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(71, 71),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
} else var image = null;
var marker = new google.maps.Marker({
map: map,
icon: image,
position: place.geometry.location
});
var request = {
reference: place.reference
};
google.maps.event.addListener(marker,'click',function(){
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
contentStr += '<br>'+place.types+'</p>';
infowindow.setContent(contentStr);
infowindow.open(map,marker);
} else {
var contentStr = "<h5>No Result, status="+status+"</h5>";
infowindow.setContent(contentStr);
infowindow.open(map,marker);
}
});
});
gmarkers.push(marker);
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers["+parseInt(gmarkers.length-1)+"],\"click\");'>"+place.name+"-"+place.formatted_phone_number+"</a><br>";
document.getElementById('side_bar').innerHTML += side_bar_html;
}
google.maps.event.addDomListener(window, 'load', initialize);
});

The formatted phone number displayed in the infoWindow is returned in the placeDetails response, which happens when the marker is clicked, it isn't available in the nearbySearch response, which is used to create the sidebar.

Hey I'm new to the google maps api, and I have an embedded map, i'm using geolocation to get the users lat and long, and i'm then filling in the gaps in the maps api. The map, however doesn't work when I use the generated lat and long, but does work if i just type one in
Non-working code:
var map;
var infowindow;
function initialize() {
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
function showPosition(position)
{
var latlon = new google.maps.LatLng( position.coords.latitude + "," + position.coords.longitude );
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlon,
zoom: 15,
disableDefaultUI: true
});
var request = {
location: latlon,
radius: 555,
types: ['bar']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
alert(place.name);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Working code
var map;
var infowindow;
function initialize() {
var latlon = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlon,
zoom: 15,
disableDefaultUI: true
});
var request = {
location: latlon,
radius: 555,
types: ['bar']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
alert(place.name);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Any help if appreciated :)

Replace your line:
var latlon = new google.maps.LatLng
(position.coords.latitude + "," + position.coords.longitude);
with
var latlon = new google.maps.LatLng
(position.coords.latitude, position.coords.longitude);
The problem is in concatenating two values into one where constructor expects two parameters.