Trying to create a PhoneGap mobile app. Totally new to mobile apps, phonegap, and JS so bear with me. This is where I'm at:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions)
};
With that, the map renders in the browser just fine. When adding the following that I've found in a number of tutorials it refuses to render anything. I am trying to do all of this in the googlemap/index.html page that I have created.
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var LatLng = new google.maps.LatLng(40.710,-73.994)
var marker = new.google.maps.Marker({
position: myLatLng,
title: "hello world!"
});
marker.setMap(map);
};
When I add the following, the entire page refuses to render.
Basically, I'm using the above method to display a google map, and I'm trying to add a pin to the center location. Seems simple enough but proving to be beyond my abilities.
You have a syntax error on this line:
var marker = new.google.maps.Marker({
Notice that there is a dot between the new operator and the class name.
To fix, replace the line above with:
var marker = new google.maps.Marker({
Happy mapping!
PS: The error was reported in the (desktop) browser's console, I'm not sure how you'd see the same on an Android device.
Related
On a website I am building I have a google map as a background of a contact form. It looks nice, but I would like to convert the google map into the google street view to get a nice picture of the building so they know exactly where they are going.
I have been trying to follow the google site to convert my code over to the street view version, but I seem to be missing something and can't quite figure out what.
Some help would be gratefully appreciated. I've never done a street view map before.
The code I have currently looks like this
var mapOptions = {
zoom: 20,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(pos_a1, pos_b1), //my position I have stored as variables to make it cleaner
map: map,
});
and I have tried
var mapOptions = {
zoom: 1,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.StreetViewPanorama( document.getElementById( 'map-canvas' ), mapOptions );
myPano.setVisible(true);
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(pos_a1, pos_b1),
map: map,
});
but the map just disappears.
A StreetViewPanorama expects a position-parameter instead of center.
Furthermore you use 2 different variables(map and myPano)
This would work(when there is a panorama available for the given position):
var panoOptions = {
position: map_center,
scrollwheel: false
}
var myPano = new google.maps
.StreetViewPanorama( document.getElementById( 'map-canvas' ),
panoOptions );
I am using this piece of code within a Bootstrap template. I am facing issues when loading images within a Bootstrap Tab content pane.
This is the JavaScript code which I use to initialize the Map:
var latlng = new google.maps.LatLng(50, 50);
var myOptions = {
zoom: _zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Google Office!'
});
I have not found any method(s) on the internet to manually reload a Google Map instance.
Is this possible and how? Thanks!
Yes, you can 'refresh' a Google Map like this:
google.maps.event.trigger(map, 'resize');
This basically sends a signal to your map to redraw it.
You can refresh with this:
map.panBy(0, 0);
map.setZoom(map.getZoom());
For some reasons, resize trigger did not work for me, and this one worked.
I am working with the Google Maps KML layer click event.
I am using this code:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
alert(kmlEvent.featureData.name);
});
}
Sometimes alert(kmlEvent.featureData.name) shows a number but sometimes it's 'undefined'.
Sometimes obj.featuredData.id is null (ZERO_RESULTS status is in status field).
Re-created your code in a fiddle: http://jsfiddle.net/mdares/TAfys/
I cannot replicate the issue you are having. Can you provide an example given the above link of where it fails? Is this possibly browser specific? Finally - is there any additional code you haven't posted which might be the cause? My code is unchanged from yours as you posted, but I am curious if you are also doing other things:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function (kmlEvent) {
alert(kmlEvent.featureData.name);
});
}
The code in example 1 works. I would like to understand the marker.setIcon(); function more (new to JavaScript also).
My question is. In the documentation for Google maps you see something like this for changing the marker.
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
How does this relate to what I have done in example 1 for setting up marker Icon, shoud I have done somethign like this instead?
marker = google.maps.MarkerImage({
url: "newIcon.png"
});
marker.setIcon(marker);
and would that have worked?
here is my example
Example 1
function initialize(){
//MAP
var latlng = new google.maps.LatLng('xxx','xxx');
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
marker.setIcon("newIcon.png");
map.setCenter(latlng);
}
You're giving a V2 answer for a V3 question.
There is no GIcon in V3.
var image = new google.maps.MarkerImage("newIcon.png");
Can be used inside your marker as the icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
icon:image
});
I just started using the version 3 of the google maps api, and i am making a simple implementation of clustering, but i cant make it work. Maybe you can see where is my error, and help me making it work:
var map;
function runmap() {
//Prepare cordinates
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
//Prepare other options
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
//,disableDefaultUI: true//Uncoment to disable map controls
};
//Prepare map using de destination id(in the html page) and the options
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//Adding markers(Search marker options for more options)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(-34.597, 150.744),
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(-34.290, 150.444),
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var markers = [];
markers.push(marker);
markers.push(marker2);
markers.push(marker3);
var markerCluster = new MarkerClusterer(map, markers);
}
Update
This is the error i see:
You need the MarkerClusterer or MarkerClustererPlus for Google API version 3. It looks like you are using MarkerClusterer for Google Maps API version 2.
First, I assume you have loaded all the needed libraries (included the one for the clustering) and you get no JS errors. If that is not so and you have doubts, please report all the errors you get and libraries you load.
Try to supply maxZoom level:
var markerCluster = new MarkerClusterer(map, markers, { maxZoom: 10 });
Then when you see the map, zoom out and check if it would group the markers.