Having trouble merging 2 different codes

Dino

unread,

Aug 25, 2012, 10:51:34 PM8/25/12

to google-map...@googlegroups.com

Can anyone look over my code and guide me on changing the code where needed to display the markers. I know that I am using 2 different styles of coding and I believe the 1st thing I need to fix is the function getNormalizedCoord(coord, zoom) function as I am using this function for my custom map but also am using function createMarker(lat, lon, html) to place the multiple markers I have planned.

I want to use the (lat, lon) as the coords but I am not seeing how to change the code to use them.

So many thanks!

index2.html

Dino

unread,

Aug 30, 2012, 7:03:53 PM8/30/12

to google-map...@googlegroups.com

Nothing yet? Wow :(

ProbablyMike

unread,

Aug 31, 2012, 5:14:49 AM8/31/12

to google-map...@googlegroups.com

First question, what do you mean by "I know that I am using 2 different styles of coding"?

Secondly, it's impossible to run your code. If you view it using the link above, it's trying to load /js/lib/dummy.js, /css/normalize.css and /css/result-light.css but of course there is no way to find them, they all 404

Where you are trying to load the maps API doesn't look right http://maps.google.com/maps/api/js?sensor=false&.js

Then it just stops executing!

You'll get more help if you just post a LINK to where your map is so we can see it working, or not working so we can see any errors.

Andrew Leach

unread,

Aug 31, 2012, 11:52:51 AM8/31/12

to google-map...@googlegroups.com

On 31 August 2012 10:14, ProbablyMike <mike....@stroud.gov.uk> wrote:

> Where you are trying to load the maps API doesn't look right
> http://maps.google.com/maps/api/js?sensor=false&.js

I think the .js on the end of a url is intended to force early
versions of IE to treat what arrives as the right MIME type. It won't
have any effect on what is actually sent (usually; and certainly in
the case of the API at the moment).

Dino

unread,

Sep 7, 2012, 8:40:46 PM9/7/12

to google-map...@googlegroups.com, andrew....@gmail.com

I was finally able to get it working. Now I need to work on the sidebar nav and grouping the icons.

<!DOCTYPE html>

<html>

<head>

<title> Gmap API v3 Sample</title>

#map_canvas{

width: 400px;

height: 400px;

}

</style>

</head>

<body>

<tr>

</td>

<P>Right click to get coords</p><br/>

<a href='#' onClick="gotoPoint(1);">Click for marker 1</a><br/>

<a href='#' onClick="gotoPoint(2);">Click for marker 2</a>

</td>

</tr>

</table>

var moonTypeOptions = {

getTileUrl: function(coord, zoom) {

var normalizedCoord = getNormalizedCoord(coord, zoom);

if (!normalizedCoord) {

return null;

}

var bound = Math.pow(2, zoom);

return 'http://karl-med/gmap/images' +

'/' + zoom + '/' + normalizedCoord.x + '/' +

(bound - normalizedCoord.y - 1) + '.png';

},

tileSize: new google.maps.Size(256, 256),

maxZoom: 3,

minZoom: 0,

radius: 1738000,

name: 'Skyrm Map'

};

var moonMapType = new google.maps.ImageMapType(moonTypeOptions);

// =============================

var MyMarkers = [[1.44204833, 1.40340333, "hi"],

[1.49261667, 12.92661167, "bye"]];

//var infowindow = [];

var marker = [];

var MyCenter = new google.maps.LatLng(0.44204833, 0.40340333);

var mapOptions = {

zoom: 2,

center: MyCenter,

streetViewControl: false,

mapTypeControlOptions: {

mapTypeIds: ['moon']

}

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

map.mapTypes.set('moon', moonMapType);

map.setMapTypeId('moon');

window.onload = initialize()

// ==========================================================================================

function initialize() {

google.maps.event.addListener(map, 'rightclick', function(event) {

var lat = event.latLng.lat();

var lng = event.latLng.lng();

// populate yor box/field with lat, lng

alert("Lat=" + lat + "; Lng=" + lng);

});

PlaceMarker(MyMarkers);

}

function PlaceMarker(MyMarkers) {

for (var i = 0; i < MyMarkers.length; i++) {

createMarker(MyMarkers[i][0], MyMarkers[i][1], MyMarkers[i][2]);

}

function createMarker(lat, lon, html) {

var newmarker = new google.maps.Marker({

position: new google.maps.LatLng(lat, lon),

map: map,

title: html

});

newmarker['infowindow'] = new google.maps.InfoWindow({

content: html

});

google.maps.event.addListener(newmarker, 'mouseover', function() {

this['infowindow'].open(map, this);

this['infowindow'].close;

});

google.maps.event.addListener(newmarker, 'Click', function() {

Alert("ji");

});

//Do I need this???

//marker.push(newmarker);

}

function gotoPoint(myPoint){

map.setCenter(new google.maps.LatLng(marker[myPoint-1].position.lat(), marker[myPoint-1].position.lng()));

marker[myPoint-1]['infowindow'].open(map, marker[myPoint-1]);

}

// Normalizes the coords that tiles repeat across the x axis (horizontally)

// like the standard Google map tiles.

function getNormalizedCoord(coord, zoom) {

var y = coord.y;

var x = coord.x;

// tile range in one direction range is dependent on zoom level

// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc

var tileRange = 1 << zoom;

// don't repeat across y-axis (vertically)

if (y < 0 || y >= tileRange) {

return null;

}

// repeat across x-axis

if (x < 0 || x >= tileRange) {

x = (x % tileRange + tileRange) % tileRange;

}

return {

x: x,

y: y

};

}

//]]>

</script>

</body>

</html>

Reply all

Reply to author

Forward