Javascript Google Map not working - javascript

I'm new to Google Maps api and its library. I wonder why I'm not seeing the map in my page.
This is the code:
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
var latlong = new google.maps.LatLng(-0.179041, -78.499211);
console.log(latlong);
var mapOptions = {
zoom: 13,
center: latlong,
disableDefaultUI: false,
navigationControl: false,
mapTypeControl: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('city_map'),
mapOptions);
console.log(map);
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
var marker = new google.maps.Marker({
position: latlong,
map: map,
title: "Test"
});
</script>
You see I'm console.logging the latlong and the map, they look fine.. anyway, I hope it is not something extremely obvious.

You dont have height and width attached to the div, thats why. Check out this fiddle.
#city_map{
min-height:300px;
min-width:300px;
}
https://jsfiddle.net/dm7j7494/1/

Related

Google maps api in backbone view, not displaying zoom and marker icons

I am creating a backbone view where I want to show a map using the Javascript api for Google Maps.
In my html file I have this:
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
<div id="map" style="width: 550px; height: 300px; float:left"></div>
And in the backbone view I have the following:
var MapView = Backbone.View.extend({
el: $('#map'),
initialize: function() {
var defaultSettings = { date:'01/12/2016', time: '10:00',
lat:'40.72815832561118', lng: '-73.99564975565187' };
var myLatLng = new google.maps.LatLng(defaultSettings.lat, defaultSettings.lng);
var sv = new google.maps.StreetViewService();
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Current Position"
});
}
});
When I try and load the map, I actually get it on the exact position I want, however the icons for zoom and marker are not showing.
If i wait for a long time, the zoom icons show up however the marker never appears. What could be the problem?

Embedding google street view on website

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 );

mapseasy.com embed google maps with multiple locations

I was successful embedding google maps api with "mapseasy.com" script.
But their generator only has information for one location... I will need to use this map and have multiple locations.
Notice:
http://mesgolf.com/course-flyover.php
I would like to add another PIN... anyone know how to accomplish this?
Current JS is:
function LoadGmaps() {
var myLatlng = new google.maps.LatLng(40.6094825,-73.7280392);
var myOptions = {
zoom: 10,
center: myLatlng,
disableDefaultUI: true,
navigationControl: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("MyGmaps"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Lawrence Yacht & Country Club"
});
var infowindow = new google.maps.InfoWindow({
content: "<strong>Lawrence Yacht & Country Club</strong><br />View Course Flyover<br /><br />"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
I will give another long/lat example of a location: 40.65063,-73.528508
The HTML looks like this:
<div id="MyGmaps" style="width:100%;height:100%; position:absolute;"></div>
See the documentation of the Google Maps Javascript API v3 on Markers
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(40.65063,-73.528508),
map: map,
title:"marker 2"
});
var infowindow2 = new google.maps.InfoWindow({
content: "<strong>Marker 2</strong><br />more information<br /><br />"
});
google.maps.event.addListener(marker2, "click", function() {
infowindow2.open(map, marker2);
});
working fiddle

Change the position of a Google Maps control?

When using the Google Maps API, you can set the position of a control like this.
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
I would like to set the position depending on user screen. I have a varible isMobile and tried to configure the position like this:
position: (isMobile)?google.maps.ControlPosition.BOTTOM_CENTER:position: google.maps.ControlPosition.TOP_CENTER
But this did not work. Are there other ways to achieve what I want?
Thanks!
Your syntax has an error, you are trying to add position twice.
Try it like this:
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition[isMobile?'BOTTOM_CENTER':'TOP_CENTER']
}

Get only one element in class for Google Maps

I have the following used for Google Maps using its Javascript API:
# HTML markup
<div id="#city_123">
<div class="map"></div>
</div>
# calling function
marker("#city_123 .map"); // There is only one .map
# marker() function
function marker(shop) {
var map;
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$(shop).each(function(index) {
map = new google.maps.Map(this, mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(this).data("lat"), $(this).data("lng")),
map: map,
});
map.setCenter(marker.getPosition());
});
}
I have tried numerous ways to remove the .each because it is not necessary. I only have one .map. There are reasons why I must use .map class because it's actually created dynamically, but that besides the point.
How can I rewrite this to be friendly?
Thanks.
Try this:
JS
function marker(shop) {
var map;
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($(shop)[0], mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(shop).data("lat"), $(shop).data("lng")),
map: map,
});
map.setCenter(marker.getPosition());
}

Categories

Resources