I can successfully generate a google map with the code below:
var myLatlng = new google.maps.LatLng(37.77493, -122.419415);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
However when I try to do it with the block of code below (storing the coordinate in a variable). The map comes up as all blue, with or with out the replace function.
var coordinate = "37.77493,-122.419415";
coordinate = coordinate.replace('"','');
var myLatlng = new google.maps.LatLng(coordinate);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Can anyone tell me what's going wrong?
It looks like LatLng constructor takes two numbers not a string
var coordinates = "37.77493,-122.419415".split(',');
var myLatlng = new google.maps.LatLng(coordinates[0], coordinates[1]);
Related
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.
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
I'm using the google maps api like this:
this.init_map = function(lat, lng){
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title:"I'm Here!"
});
}
This takes lat and lng, and draws the map just fine, but when new lat & lng variables get pushed into this function over a websocket the page doesn't reload, but the map gets re drawn with the marker in the new lat & lng position.
I want to update the marker on the map without redrawing the map.
var map = null;
var markers = [];
this.init_map = function(){
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
this.addMarker = function(lat, lng, id){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title:"I'm Here!"
});
markers.push({ id: id, markerObject: marker});
}
this.updateMarkerCoordinates(lat, lng, id){
//I let you loop the markers array, compare ids and retrieve the marker
marker.setPosition(new google.maps.LatLng(lat, lng));
}
I am using this google maps script code and it has no problems but I need to add a marker to it.
There's code that defined a marker but no marker seems to appear in the map.
Here is the code:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(123456.-12345566);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
jQuery(document).ready(initialize);
</script>
How would I add a marker to it?
Neither coordinates (one for map, one for marker) are properly defined
This page will give you LatLng coordinates for the spot you click on the map to customize and fill in the values below.
//map center
var latlng = new google.maps.LatLng(12,-12); // <-- this one
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// HERE ALSO
var myLatlng = new google.maps.LatLng(12,-12); // <-- this one for the marker
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
The code is fine. It will add a pointer to a map.
Couple of things:
Do you have a Google API key? (https://developers.google.com/maps/documentation/javascript/tutorial#api_key)
The coordinates you gave are no where. Try using -123456. 12345566 as a test.
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.