Google Map API seems to not load - javascript

I have a problem with a google map on my website not loading but there is still something in the container except a white background, indeed I can see the terms at the bottom right and the satellite button at the top right.
There is the code, I hope you will be able to spot what is wrong :
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize());

In you code mapCanvas seems to be unassigned. After adding something like var mapCanvas = document.getElementById('map'); the map loads as intended.
JSFiddle

Got it working.
I've added googleapis link "https://maps.googleapis.com/maps/api/js?sensor=false">.
And I've changed var map = new google.maps.Map(mapCanvas, mapOptions); to var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
And i have removed empty parentheses in the maps event listener.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 600px;
height: 600px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

Related

Putting markers on google maps

I am trying to put two separate markers on two separate maps that are positioned side by side on my website.
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
}
</script>
You can create a simple maker for this.
Just place this in your code after map = new Google.maps.Map(document.getElementById("map_canvas"), myOptions);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
And after map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
Example
Your code should look like this:
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
}
</script>
That code by itself will not put any markers on the map, it will simply render the maps, with each one centred on the latitude/longitude you specify.
Look at the first example on https://developers.google.com/maps/documentation/javascript/markers for an idea of how to add a marker to each of your maps.

Generating google map from Latitude and Longitude

I need to generate a google map in a web page using latitude and longitude. But map is not shown. SO far i have tried is as follows -
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script language=javascript src='http://maps.google.com/maps/api/js?sensor=false'></script>
<div id="map"></div>
<script>
function initialize(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
google.maps.event.addDomListener(window,'load', initialize);
$(document).ready(function (){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($('#map'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
</script>
How can i generate the map? Could not find any error there. Please help me.
You are adding your code multiple times
This works:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
google.maps.event.addDomListener(window,'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:500px;height:380px;"></div>
</body>
</html>
Fiddle example: https://jsfiddle.net/eugensunic/wexd3spp/1/
CodePen example: http://codepen.io/anon/pen/QjZgpw

Using latitude and longitude to pin point a location in google maps

I wrote a script to add maps to my website. It is as follows:
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
HTML code:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
</div>
css:
#map{
width: 500px;
height: 400px;
}
I added this code for pin pointing a location:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
//give latitude and long
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
But when I used that code, map on my page disappeared. How can I make it to work?
You are creating map two time on same div that's why its happening just change your code as below:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
there is no need to add var map = new google.maps.Map(mapCanvas, mapOptions);
second time

google maps api v3 double image for icon

var icon = {
url: pointer.png,
size: new google.maps.Size(48,48),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(24,24)
};
var marker = new google.maps.Marker({
position: pos,
map: map,
icon: icon
});
Is it possible to add second image to the marker? I'd like to have double marker for same point, 1 overlaid on top of the other.
I want to have little flag of country next to marker.
Possible?
Prior to the API v3.14, you hack this with a icon and a shadow image file together on the same marker.
Here's how I would solve it with v3.14+
function initialize() {
google.maps.visualRefresh = true;
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0, 0),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map
});
// CREDIT: https://developers.google.com/maps/documentation/javascript/markers
marker.flag = new google.maps.Marker({
icon: {
url: 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(32, 32)
}
});
marker.flag.bindTo('position', marker);
marker.flag.bindTo('map', marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
See: http://jsfiddle.net/stevejansen/J5swt/

How to add multiple markers to Google MAP through JS API? v3

I'm using this code:
<script type='text/javascript'>
function initialize() {
var latlng = new google.maps.LatLng(50.077861,14.456956);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(\"searchMap\"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Here we are!'
});
}
</script>
But now I need to show multiple markers on the map, and the markers should include links to subpages of the website, any ideas how to menage that width the code I posted?
Thanks, Mike.

Categories

Resources